makersclaw 0.8.0 → 0.8.1

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

@@ -0,0 +1,163 @@
+"use client";
+
+import { useId, useMemo, useState } from "react";
+import { Button, Checkbox, Field, Input, Select, Tabs, TabPanel, Textarea, cx } from "../../ui";
+
+// ColumnPicker — choose the columns an agent will fill: common ones from
+// a list the app passes in (each with its cost per record), or the
+// person's own question with the kind of answer. It says what they cost
+// together before anything starts. It saves nothing: onSubmit gets the
+// choice.
+//
+//   recipes  [{ key, name, description, credits, input?: "role" | "instructions",
+//              defaultRole?, needs?: ["Domain"], checked? }]
+//   rows     how many records the columns would fill (for the total)
+//   heading  the common tab's label ("Common, for companies")
+//   onSubmit([{ recipe, name, ask?, example?, answerType?, options? }])
+//   submitLabel(n) the button's words ("Add 6 columns")
+//   answerTypes  [{ value, label }] for your own question
+//   ownCredits  what your own question costs per record
+
+const ANSWER_TYPES = [
+  { value: "yes_no", label: "Yes or no" },
+  { value: "number", label: "A number" },
+  { value: "text", label: "A short text" },
+  { value: "link", label: "A link" },
+  { value: "choice", label: "One of a few choices" },
+];
+
+export function ColumnPicker({
+  recipes,
+  rows = 0,
+  heading = "Common",
+  onSubmit,
+  submitLabel = (n) => (n === 1 ? "Add 1 column" : `Add ${n} columns`),
+  answerTypes = ANSWER_TYPES,
+  ownCredits = 50,
+  busy = false,
+  unit = "credits",
+  noun = "row",
+}) {
+  const id = useId();
+  const [tab, setTab] = useState("common");
+  const [picked, setPicked] = useState(() => Object.fromEntries(recipes.filter((r) => r.checked).map((r) => [r.key, true])));
+  const [roles, setRoles] = useState(() => Object.fromEntries(recipes.filter((r) => r.input === "role").map((r) => [r.key, r.defaultRole ?? ""])));
+  const [how, setHow] = useState(() => Object.fromEntries(recipes.filter((r) => r.input === "instructions").map((r) => [r.key, { ask: r.defaultAsk ?? "", example: r.defaultExample ?? "" }])));
+  const [own, setOwn] = useState({ question: "", name: "", answerType: "yes_no", options: "" });
+
+  const chosen = useMemo(() => {
+    const out = recipes
+      .filter((r) => picked[r.key])
+      .map((r) => ({
+        recipe: r.key,
+        name: r.input === "role" ? roles[r.key]?.trim() || r.name : r.name,
+        ask: r.input === "role" ? roles[r.key]?.trim() : r.input === "instructions" ? how[r.key]?.ask?.trim() : undefined,
+        example: r.input === "instructions" ? how[r.key]?.example?.trim() : undefined,
+        credits: r.credits,
+      }));
+    if (own.question.trim())
+      out.push({
+        recipe: "question",
+        name: own.name.trim() || own.question.trim().slice(0, 40),
+        ask: own.question.trim(),
+        answerType: own.answerType,
+        options: own.answerType === "choice" ? own.options.split(",").map((s) => s.trim()).filter(Boolean) : [],
+        credits: ownCredits,
+      });
+    return out;
+  }, [recipes, picked, roles, how, own, ownCredits]);
+  const perRow = chosen.reduce((n, c) => n + (c.credits ?? 0), 0);
+  const missingRole = recipes.some((r) => picked[r.key] && r.input === "role" && !roles[r.key]?.trim());
+
+  return (
+    <div className="grid gap-4">
+      <Tabs
+        aria-label="Which columns"
+        id={id}
+        value={tab}
+        onChange={setTab}
+        tabs={[
+          { key: "common", label: heading },
+          { key: "own", label: "Your own question" },
+        ]}
+      />
+      <TabPanel tab="common" value={tab} id={id} className="pt-0">
+        <ul className="grid divide-y divide-border">
+          {recipes.map((r) => {
+            const on = Boolean(picked[r.key]);
+            return (
+              <li key={r.key} className="grid gap-2 py-2">
+                <div className="flex items-start gap-3">
+                  <Checkbox
+                    id={`${id}-${r.key}`}
+                    checked={on}
+                    onChange={(e) => setPicked((p) => ({ ...p, [r.key]: e.target.checked }))}
+                    aria-label={r.name}
+                    className="min-h-0 pt-0.5"
+                  />
+                  <label htmlFor={`${id}-${r.key}`} className="min-w-0 flex-1 cursor-pointer">
+                    <span className="block text-sm font-medium">{r.name}</span>
+                    {r.description ? <span className="block text-xs text-muted-foreground">{r.description}</span> : null}
+                  </label>
+                  <span data-nums className="shrink-0 font-mono text-xs text-muted-foreground">
+                    {r.credits} / {noun}
+                  </span>
+                </div>
+                {on && r.input === "role" ? (
+                  <Field id={`${id}-${r.key}-role`} label="Role" className="ml-7">
+                    <Input id={`${id}-${r.key}-role`} value={roles[r.key] ?? ""} onChange={(e) => setRoles((s) => ({ ...s, [r.key]: e.target.value }))} placeholder="Head of Compliance" />
+                  </Field>
+                ) : null}
+                {on && r.input === "instructions" ? (
+                  <div className="ml-7 grid gap-3">
+                    <Field id={`${id}-${r.key}-how`} label="How to write it">
+                      <Textarea id={`${id}-${r.key}-how`} rows={3} value={how[r.key]?.ask ?? ""} onChange={(e) => setHow((s) => ({ ...s, [r.key]: { ...s[r.key], ask: e.target.value } }))} />
+                    </Field>
+                    <Field id={`${id}-${r.key}-ex`} label="A line of yours, as an example">
+                      <Textarea id={`${id}-${r.key}-ex`} rows={2} value={how[r.key]?.example ?? ""} onChange={(e) => setHow((s) => ({ ...s, [r.key]: { ...s[r.key], example: e.target.value } }))} />
+                    </Field>
+                  </div>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      </TabPanel>
+      <TabPanel tab="own" value={tab} id={id} className="grid gap-3 pt-0">
+        <Field id={`${id}-q`} label="Your question" hint="The agent answers it for every row, from the public web.">
+          <Textarea id={`${id}-q`} rows={2} value={own.question} onChange={(e) => setOwn((s) => ({ ...s, question: e.target.value }))} placeholder="Do they sell to banks?" />
+        </Field>
+        <Field id={`${id}-n`} label="Column name">
+          <Input id={`${id}-n`} value={own.name} onChange={(e) => setOwn((s) => ({ ...s, name: e.target.value }))} placeholder="Sells to banks" />
+        </Field>
+        <Field id={`${id}-t`} label="The kind of answer">
+          <Select id={`${id}-t`} value={own.answerType} onChange={(e) => setOwn((s) => ({ ...s, answerType: e.target.value }))} options={answerTypes} />
+        </Field>
+        {own.answerType === "choice" ? (
+          <Field id={`${id}-o`} label="The choices" hint="Separated by commas.">
+            <Input id={`${id}-o`} value={own.options} onChange={(e) => setOwn((s) => ({ ...s, options: e.target.value }))} placeholder="Banks, Fintechs, Both, Neither" />
+          </Field>
+        ) : null}
+        <p data-nums className="font-mono text-xs text-muted-foreground">
+          {ownCredits} {unit} / {noun}
+        </p>
+      </TabPanel>
+      <div className="grid gap-2 border-t border-border pt-3">
+        <p className="text-sm">
+          <span className="font-medium">
+            {chosen.length} {chosen.length === 1 ? "column" : "columns"}
+          </span>{" "}
+          · <span data-nums className="font-mono">{perRow.toLocaleString("en-US")}</span> {unit} a {noun}
+        </p>
+        {rows ? (
+          <p className="text-xs text-muted-foreground">
+            All {rows.toLocaleString("en-US")} {rows === 1 ? noun : `${noun}s`}: about <span data-nums className="font-mono">{(perRow * rows).toLocaleString("en-US")}</span>. Nothing is spent until you start a fill.
+          </p>
+        ) : null}
+        <Button variant="primary" disabled={busy || chosen.length === 0 || missingRole} loading={busy} onClick={() => onSubmit?.(chosen)} className={cx("justify-self-start")}>
+          {submitLabel(chosen.length)}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,50 @@
+"use client";
+
+// AgentColumn's pieces over answers in every state (found, two answers,
+// not found, failed, queued, looking up, not asked) — the gallery's and
+// the smoke test's surface. Not installed into apps.
+import { useState } from "react";
+import { AnswerCell, AnswerDetail, ColumnHeader, ColumnPicker, Receipt, SureLegend, summarizeAnswers } from "../components/blocks/agent-column";
+
+const ANSWERS = [
+  { status: "found", value: "62", detail: "51–200 on LinkedIn", confidence: "likely", source: { title: "Their team page", url: "pennantpay.com/team", evidence: "62 people building payouts" } },
+  { status: "two_answers", value: "85", other: { value: "70", source: { title: "Careers at Klarwerk", url: "klarwerk.de/careers", evidence: "We're a team of 70" } }, source: { title: "Klarwerk on LinkedIn", url: "linkedin.com/company/klarwerk", evidence: "85 members" } },
+  { status: "not_found", note: "Searched the team page, LinkedIn and the news.", tried: [{ title: "Their team page", url: "spreeloop.io/team" }] },
+  { status: "queued", waitsFor: ["Domain"] },
+  { status: "working", looking: "reading gleisneun.de" },
+  { status: "failed", detail: "the page timed out", tried: [{ title: "Their team page", url: "nordlicht.io/team" }] },
+  null,
+];
+
+export default function Demo() {
+  const [open, setOpen] = useState(0);
+  return (
+    <div className="grid gap-6 p-6">
+      <SureLegend />
+      <ColumnHeader name="Headcount" progress={summarizeAnswers(ANSWERS)} />
+      <div className="grid w-80 max-w-full gap-3">
+        {ANSWERS.map((a, i) => (
+          <AnswerCell key={i} answer={a} type="number" onOpen={() => setOpen(i)} label={`Answer ${i + 1}`} />
+        ))}
+      </div>
+      <div className="w-full max-w-md">
+        <Receipt answer={ANSWERS[1]} title="Klarwerk" question="Headcount" read="read 22 Sep" onPick={() => {}} />
+      </div>
+      <div className="w-full max-w-md">
+        <AnswerDetail answer={ANSWERS[open]} title="Klarwerk" question="Headcount" askCost={40} onPick={() => {}} onType={() => {}} onAskAgain={() => {}} onAccept={() => {}} onKeepNotFound={() => {}} />
+      </div>
+      <div className="max-w-md">
+        <ColumnPicker
+          rows={22}
+          heading="Common, for companies"
+          recipes={[
+            { key: "domain", name: "Domain", description: "Their website's address", credits: 15, checked: true },
+            { key: "person", name: "A person in a role", description: "Their name, title and profile", credits: 80, input: "role", defaultRole: "Head of Compliance", checked: true },
+            { key: "opener", name: "Opener", description: "An opening line, written the way you write", credits: 30, input: "instructions" },
+          ]}
+          onSubmit={() => {}}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+// The AgentColumn block — `makersclaw add agent-column`. Fixed: compose it
+// through its props (README.md beside this file).
+export { AnswerCell, AnswerDetail, ColumnHeader, SureMark, SureLegend, Source } from "./agent-column";
+export { AgentMark, AnswerLine, Clipping, JobHeader, Receipt, ReceiptActions, TriedList, TrustMark } from "./receipt";
+export { ColumnPicker } from "./column-picker";
+export { answerState, answerWords, needsCheck, summarizeAnswers, progressWords, markWords, decidingWords, plainWords, shortUrl, CONFIDENCE } from "./model";
+export { answerColumnType } from "./spreadsheet-type";

package/registry/blocks/agent-column/model.js

@@ -0,0 +1,164 @@
+// agent-column — the pure half: what state an answer is in, what it says
+// in words, whether a person should look at it, and a column's progress.
+// Server-safe (no React), so a server surface can count the same way the
+// screen draws.
+//
+// An answer is one cell an agent fills (or suggests) for one record:
+//
+//   {
+//     id, status,                 // queued | working | found | not_found | two_answers | failed | stale | suggested
+//     value, detail, link,        // the answer ("62"), a line under it ("51–200 on LinkedIn"), a URL
+//     confidence,                 // sure | likely | guess
+//     source: { url, title, evidence },   // where it came from, and the words on the page
+//     other:  { value, detail, link, source: { url, title, evidence } },  // the second answer
+//     note,                       // how it was found, or what was tried
+//     tried: [{ title, url, evidence }],  // what it read (not found)
+//     flag,                       // may_not_fit | left (or your own word)
+//     setBy,                      // agent | person — a person's value is never overwritten
+//     checked,                    // a person accepted it
+//     looking,                    // what the agent is reading now (working)
+//     waitsFor: ["Domain"],       // columns it waits for (queued)
+//     blockedBy: ["Head of Compliance"],  // columns it needs that weren't found (queued)
+//     waitsForRow,                // it reads the whole record and goes last
+//   }
+//
+// A missing answer (null) is "not asked yet".
+
+export const CONFIDENCE = {
+  sure: { label: "sure", words: "their own page says it, or two sources agree" },
+  likely: { label: "likely", words: "one good source" },
+  guess: { label: "guess", words: "worked out, not found written" },
+};
+
+/** The state an answer shows, one word the screen can switch on. */
+export function answerState(a) {
+  if (!a) return "empty";
+  if (a.setBy === "person") return "typed";
+  const s = a.status;
+  if (s === "queued") {
+    if (a.blockedBy?.length) return "blocked";
+    if (a.waitsFor?.length || a.waitsForRow) return "waiting";
+    return "queued";
+  }
+  if (s === "found" && a.checked) return "checked";
+  return s || "empty";
+}
+
+const list = (names) => (names.length <= 1 ? names[0] ?? "" : `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}`);
+
+/** What the answer's state says, in plain words ("Waits for Domain"). */
+export function answerWords(a) {
+  switch (answerState(a)) {
+    case "empty":
+      return "not asked yet";
+    case "queued":
+      return "Queued";
+    case "waiting":
+      return a.waitsFor?.length ? `Waits for ${list(a.waitsFor)}` : "Waits for the rest of the row";
+    case "blocked":
+      return "Can't fill";
+    case "working":
+      return "Looking up";
+    case "not_found":
+      return "Not found";
+    case "two_answers":
+      return "two answers";
+    case "failed":
+      return "Failed";
+    case "stale":
+      return "out of date";
+    case "suggested":
+      return "suggested";
+    case "checked":
+      return "checked by you";
+    case "typed":
+      return "typed by you";
+    default:
+      return CONFIDENCE[a.confidence]?.label ?? "found";
+  }
+}
+
+/** A person should look at it: nobody accepted it, and it is not found,
+ *  two answers, failed, a guess, a flag, or a suggestion. */
+export function needsCheck(a) {
+  if (!a || a.checked || a.setBy === "person") return false;
+  if (["not_found", "two_answers", "failed", "suggested"].includes(a.status)) return true;
+  return a.status === "found" && (a.confidence === "guess" || Boolean(a.flag));
+}
+
+/** A column's progress over its answers (null ones count as not asked). */
+export function summarizeAnswers(answers, total = answers.length) {
+  const out = { total, done: 0, toCheck: 0, waiting: 0, looking: 0, queued: 0, stale: 0, blocked: 0 };
+  for (const a of answers) {
+    const st = answerState(a);
+    if (["found", "checked", "typed", "not_found", "two_answers", "failed"].includes(st)) out.done += 1;
+    if (needsCheck(a)) out.toCheck += 1;
+    if (st === "waiting") out.waiting += 1;
+    if (st === "working") out.looking += 1;
+    if (st === "queued") out.queued += 1;
+    if (st === "stale") out.stale += 1;
+    if (st === "blocked") out.blocked += 1;
+  }
+  return out;
+}
+
+/** The progress line under a column's name: "138 of 480 · 3 to check". */
+export function progressWords(p, { lookingWord = "looking" } = {}) {
+  const parts = [`${p.done.toLocaleString("en-US")} of ${p.total.toLocaleString("en-US")}`];
+  if (p.toCheck) parts.push(`${p.toCheck} to check`);
+  if (p.looking) parts.push(`${p.looking} ${lookingWord}`);
+  if (p.waiting) parts.push(`${p.waiting} waiting`);
+  if (p.stale) parts.push(`${p.stale} out of date`);
+  return parts.join(" · ");
+}
+
+/** Split `text` around the occurrences of `mark` (the answer inside its
+ *  quote), for highlighting: [{ text, marked }]. */
+export function markWords(text, mark) {
+  const t = String(text ?? "");
+  const m = String(mark ?? "").trim();
+  if (!t || !m || m.length > 60) return [{ text: t, marked: false }];
+  const lower = t.toLowerCase();
+  const needle = m.toLowerCase();
+  const out = [];
+  let at = 0;
+  for (;;) {
+    const i = lower.indexOf(needle, at);
+    if (i < 0) break;
+    if (i > at) out.push({ text: t.slice(at, i), marked: false });
+    out.push({ text: t.slice(i, i + m.length), marked: true });
+    at = i + m.length;
+  }
+  if (at < t.length) out.push({ text: t.slice(at), marked: false });
+  return out.length ? out : [{ text: t, marked: false }];
+}
+
+/** A URL without its scheme and "www.", for reading ("klarwerk.de/careers"). */
+export function shortUrl(url) {
+  return String(url ?? "")
+    .replace(/^https?:\/\//i, "")
+    .replace(/^www\./i, "")
+    .replace(/\/$/, "");
+}
+
+/** The words on a page with the deciding ones marked: `[[…]]` in the
+ *  words marks them (the agent marks what decides the answer), else the
+ *  answer's value where it appears (markWords). → [{ text, marked }] */
+export function decidingWords(text, mark) {
+  const t = String(text ?? "");
+  if (!/\[\[[^\]]+\]\]/.test(t)) return markWords(t, mark);
+  const out = [];
+  let at = 0;
+  for (const m of t.matchAll(/\[\[([^\]]+)\]\]/g)) {
+    if (m.index > at) out.push({ text: t.slice(at, m.index), marked: false });
+    out.push({ text: m[1], marked: true });
+    at = m.index + m[0].length;
+  }
+  if (at < t.length) out.push({ text: t.slice(at), marked: false });
+  return out;
+}
+
+/** The words with any `[[…]]` marks taken out, for a line of plain text. */
+export function plainWords(text) {
+  return String(text ?? "").replace(/\[\[([^\]]+)\]\]/g, "$1");
+}