makersclaw 0.8.1 → 0.8.3

package/r/transaction-list.json

@@ -5,7 +5,7 @@
   "title": "TransactionList",
   "description": "Money records as a plain list, in two variants: history (payments in and out, grouped by month, a received / paid / pending / failed mark and a signed amount) and invoices (number, date, a Paid / Due in N days / N days overdue badge, amount, download). Optional date-range filter, Export and per-row download. Empty, loading and error states built in.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.3/r/core.json"
   ],
   "dependencies": [],
   "files": [
@@ -46,7 +46,7 @@
   "docs": "Installed to components/makersclaw/blocks/transaction-list. Import: import { TransactionList } from \"@/components/makersclaw/blocks/transaction-list\". Props and an example: components/makersclaw/blocks/transaction-list/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.1",
+      "version": "0.8.3",
       "useWhen": "A billing page's invoices, an account's payment history, a wallet's recent activity: records read top to bottom, newest first. Not for records the founder sorts, filters by column or totals (data-table), or for one order (order-detail)."
     }
   }

package/r/trigger-picker.json

@@ -5,8 +5,8 @@
   "title": "TriggerPicker",
   "description": "What starts an automation, as a panel: by hand, on a schedule in the team's time zone, when an app sends an event, when one of an app's actions finishes, when a record is added or changed, when the automation's own web address is called (its secret made and replaced here, shown once), or when another automation finishes. The platform says which of these it runs (the list door's triggers); a connection's own events are listed as \"soon\" with what to use meanwhile. The schedule is offered in the shapes people ask for (every day, every weekday, every week, every hour, another schedule as five-field cron) with a time of day, a weekday, the team's zone or another, and a sentence saying it back (\"Runs weekdays at 07:00, team time\").",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/automation-model.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.3/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.3/r/automation-model.json"
   ],
   "dependencies": [],
   "files": [
@@ -54,7 +54,7 @@
   "docs": "Installed to components/makersclaw/blocks/trigger-picker. Import: import { TriggerPicker } from \"@/components/makersclaw/blocks/trigger-picker\". Props and an example: components/makersclaw/blocks/trigger-picker/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.1",
+      "version": "0.8.3",
       "useWhen": "An automation's trigger is edited in your own screen. automation-editor opens it when the trigger card is pressed; pass it the platform's triggers (useAutomations().triggers) so it offers what the platform runs."
     }
   }

package/r/whiteboard.json

@@ -5,8 +5,8 @@
   "title": "Whiteboard",
   "description": "A full-page freeform whiteboard on sketch-canvas: a top bar with the board's title (click to rename), the save state (Saving…, Saved, or the error with Retry), a Board / Text view switch, Export PNG and an optional Share button; under it the Miro-style canvas (tool rail, floating toolbar, zoom, undo). An empty board offers starter templates — blank, a grid of titled areas, a 2×2 matrix — and the Text view lists every word on the board for a screen reader or an agent. With onCreateTask, a selected note or text becomes a task from the top bar (\"Create task\", editable title; several notes make one task each), and a small badge marks it on the board from then on. The sketch is plain JSON; saves are async callbacks answering { ok }.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/sketch-canvas.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.3/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.3/r/sketch-canvas.json"
   ],
   "dependencies": [],
   "files": [
@@ -59,7 +59,7 @@
   "docs": "Installed to components/makersclaw/blocks/whiteboard. Import: import { Whiteboard, WHITEBOARD_TEMPLATES, gridSketch, matrixSketch } from \"@/components/makersclaw/blocks/whiteboard\". Props and an example: components/makersclaw/blocks/whiteboard/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.1",
+      "version": "0.8.3",
       "useWhen": "A screen is one board to think on: a team whiteboard, a planning or prioritisation board, a place to sketch an idea and keep it with a record. Not for marking up a screenshot (annotate), sketching a UI to build (sketch-to-app), a structured board of cards and connectors (flow-canvas), or a kanban (board)."
     }
   }

package/r/workflow-view.json

@@ -5,8 +5,8 @@
   "title": "WorkflowView",
   "description": "One job of the app's agent drawn as a graph on a dotted ground: the Trigger (\"Every weekday at 07:00\", \"When a deal is created\") → each step of the chosen run with how it went, as a mark and a word → the result. Over it a run picker with Re-run; in its head the Live switch and \"Trigger manually\" with its price; beside it the run history and the overview (run-history). Before any run it draws the job's declared steps in pencil, with an honest empty line. Fed by useJobs, useRuns and useRun (lib/hooks.js). Under about 768 px of its own width the history stacks under the graph and the graph runs top to bottom.",
   "registryDependencies": [
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/core.json",
-    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.1/r/run-history.json"
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.3/r/core.json",
+    "https://cdn.jsdelivr.net/npm/makersclaw@0.8.3/r/run-history.json"
   ],
   "dependencies": [],
   "files": [
@@ -48,7 +48,7 @@
   "docs": "Installed to components/makersclaw/blocks/workflow-view. Import: import { WorkflowView } from \"@/components/makersclaw/blocks/workflow-view\". Props and an example: components/makersclaw/blocks/workflow-view/README.md. Makersclaw builds whole apps from these blocks: https://makersclaw.com",
   "meta": {
     "makersclaw": {
-      "version": "0.8.1",
+      "version": "0.8.3",
       "useWhen": "Superseded by automation-editor and run-view for an app whose jobs run on the automations engine; still the block for an app that has not moved (its jobs are the agent's wakes). A job's own page: the founder opens an automation to see what it does, how its last runs went and to run it now — a morning read, an inbox sweep, a nightly enrichment, an event-triggered workflow. For the job as a card beside the day's work use schedule-card; for a plain list of runs use run-history."
     }
   }

package/registry/blocks/agent-pane/README.md

@@ -64,6 +64,22 @@ Only a plan or a piece of one, a change the agent sent up, a counted job
 and a hand-off that never started get a new request; for those
 `chat.sameConversation` is false and the box keeps the app's own words.
 
+## Progress feedback
+
+The transcript owns progress feedback: one “Thinking…” line while no live
+text or specific tool work is moving, or an explicit queued line while the
+ask waits. A pending follow-up is never labelled “Starting…”. The composer
+keeps Stop available while the turn runs; there is no second working footer.
+
+## Questions keep the conversation open
+
+While a question waits, the main composer stays available. Sending there
+skips that question and continues the same thread, including attachments.
+Answering the question removes it immediately while the answer is sent; a
+failed submission restores it for retry. Stale thread reads cannot bring an
+accepted question back, but a new question still appears. Approval, account
+connection and credit-limit gates keep their existing controls.
+
 ## Tell the desk
 
 An app that places this block says so in its package: `"agent_pane": true`

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

@@ -38,10 +38,20 @@ import { MemberWords, Message } from "./transcript";
 // 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",
-};
+/** Specific work or streamed words already tell the member what is moving. */
+function showsProgress(message) {
+  if (message.role !== "assistant" || !message.live) return false;
+  return (message.blocks ?? []).some((block) => {
+    if (block.kind === "text") return block.streaming && Boolean(block.text?.trim());
+    if (block.kind === "plan") return block.items?.some((item) => item.state === "active");
+    if (block.kind !== "work") return false;
+    return (block.runs ?? []).some((run) =>
+      run.kind === "fold" ? run.summary?.running :
+      run.kind === "helpers" ? run.calls?.some((call) => call.status === "running") :
+      run.kind === "thought" ? run.streaming : run.status === "running",
+    );
+  });
+}
 
 /** What waits on the member, as the bar under the thread says it. */
 function needsTitle(kind, inApp) {
@@ -123,22 +133,24 @@ export function AgentPane({
   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.
+  // One generic progress row, only while nothing specific visibly moves.
+  // Pending words are a send, not proof that a worker is starting.
   const lastLegacy = legacy[legacy.length - 1];
-  const starting = Boolean(pending) && !messages.some((m) => m.role === "assistant" && m.live);
+  const visibleProgress = !pending && (view ? messages.some(showsProgress) : Boolean(lastLegacy?.writing || lastLegacy?.parts?.some((part) => part.type === "step" && part.status === "running")));
+  const queued = chat?.state === "queued";
   const thinking =
-    !needs && !inMakersclaw && (pending ? true : view ? view.thinking : live && !(lastLegacy?.writing || lastLegacy?.parts?.length));
+    live && !needs && !inMakersclaw && (queued || !visibleProgress);
 
   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;
+  // A message during a question skips it and continues the same thread.
+  // Approvals, account connections and credit limits keep their own gate.
+  const blocked = (Boolean(needs) && needs.kind !== "question") || 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.
+  // how the ask ended. Progress is in the transcript; Stop is the box's.
   const bar =
     needs && pressHere ? (
       <div className="max-h-[70%] shrink-0 overflow-y-auto border-t border-border p-2.5">{yes}</div>
@@ -167,12 +179,7 @@ export function AgentPane({
           )}
         </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 ? (
+    ) : !live && 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>
@@ -220,8 +227,8 @@ export function AgentPane({
           ))}
           {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 role="status" aria-label="Agent progress" className="flex items-center gap-2 text-xs text-muted-foreground">
+              <Spinner size="sm" label={queued ? "Queued" : "Thinking"} /> {queued ? "Queued — it starts when the one before it ends" : "Thinking…"}
             </div>
           ) : null}
           {!live && view?.failure ? (

package/templates/next/files/lib/hooks.js

@@ -1126,6 +1126,20 @@ function keepThread(key, sessionId, from) {
 
 const CHAT_LIVE = new Set(["queued", "working"]);
 
+// A pending question is identified by its request and input ids, not the
+// time its GET/stream frame arrived. Accepted answers must not reappear
+// while the agent resumes, and a genuinely new question must still show.
+function threadQuestionKey(data) {
+  if (data?.state !== "needs_you" || data.needs?.kind !== "question") return null;
+  const ids = (data.view?.questions ?? []).map((q) => q.id).filter(Boolean).sort();
+  return JSON.stringify([data.session_id, data.request?.id, data.needs.at ?? null, ids, ids.length ? null : data.needs.text]);
+}
+
+function withoutThreadQuestion(data) {
+  return { ...data, state: "working", needs: null, ...(data.view ? { view: { ...data.view, questions: [], thinking: true } } : {}) };
+}
+
+
 /**
  * The member's own thread with the app's agent, for the app's own chat
  * (the `agent-chat` block): the same eve session the desk's agent column
@@ -1206,6 +1220,31 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
   const [tick, setTick] = useState(0);
   const reload = useCallback(() => setTick((t) => t + 1), []);
   const aliveRef = useRef(true);
+  const dataRef = useRef(state.data);
+  dataRef.current = state.data;
+  const dismissedQuestions = useRef(new Map());
+  const protectQuestions = (data) => dismissedQuestions.current.has(threadQuestionKey(data)) ? withoutThreadQuestion(data) : data;
+  const dismissQuestion = () => {
+    const snapshot = dataRef.current;
+    const questionKey = threadQuestionKey(snapshot);
+    if (!questionKey) return null;
+    const pending = { key: questionKey, snapshot };
+    dismissedQuestions.current.set(questionKey, pending);
+    setState((s) => ({ ...s, error: null, data: protectQuestions(s.data) }));
+    return pending;
+  };
+  const restoreQuestion = (pending, error) => {
+    if (!pending || dismissedQuestions.current.get(pending.key) !== pending) return;
+    dismissedQuestions.current.delete(pending.key);
+    const before = pending.snapshot;
+    setState((s) => {
+      const current = s.data;
+      const otherQuestion = threadQuestionKey(current);
+      if (!current || current.session_id !== before.session_id || current.request?.id !== before.request?.id || (otherQuestion && otherQuestion !== pending.key)) return s;
+      return { ...s, error, data: { ...current, state: before.state, needs: before.needs, ...(before.view ? { view: { ...current.view, questions: before.view.questions, thinking: before.view.thinking } } : {}) } };
+    });
+  };
+  const confirmQuestion = (pending) => { if (pending) pending.snapshot = null; };
   const sessionRef = useRef(sessionId);
   sessionRef.current = sessionId;
   const rowRef = useRef(row);
@@ -1231,6 +1270,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
     if (lastKey.current === storeKey) return;
     lastKey.current = storeKey;
     const kept = keptThread(storeKey);
+    dismissedQuestions.current.clear();
     setSessionId(kept);
     setState({ data: null, loading: Boolean(kept), sending: false, pending: null, error: null, code: null, unavailable: false });
   }, [storeKey]);
@@ -1246,6 +1286,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
       if (!d || d.key !== storeKey || d.from === me) return;
       const next = d.sessionId ?? null;
       if (next === sessionRef.current) return;
+      dismissedQuestions.current.clear();
       setSessionId(next);
       setState({ data: null, loading: Boolean(next), sending: false, pending: null, error: null, code: null, unavailable: false });
     };
@@ -1287,7 +1328,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
       if (frame.desk_origin) publishDesk(frame.desk_origin);
       setState((s) => ({
         ...s,
-        data: { ...(s.data ?? {}), ...frame, turns: s.data?.turns ?? [] },
+        data: protectQuestions({ ...(s.data ?? {}), ...frame, turns: s.data?.turns ?? [] }),
         loading: false,
         error: null,
         code: null,
@@ -1337,7 +1378,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
         if (data.desk_origin) publishDesk(data.desk_origin);
         setState((s) => ({
           ...s,
-          data,
+          data: protectQuestions(data),
           loading: false,
           error: null,
           code: null,
@@ -1380,6 +1421,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
     async (message, { files } = {}) => {
       const text = String(message ?? "").trim();
       if (!text) return { ok: false, error: "nothing to ask" };
+      const dismissed = dismissQuestion();
       setState((s) => ({ ...s, sending: true, pending: text, error: null, code: null, notice: null }));
       const asking = (session) =>
         ask({ text, row: rowRef.current ?? undefined, how, job, files, sessionId: session ?? undefined, open: false });
@@ -1387,6 +1429,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
       if (!result.ok && sessionRef.current && START_FRESH.has(result.code)) result = await asking(null);
       if (!aliveRef.current) return result;
       if (!result.ok) {
+        restoreQuestion(dismissed, result.error ?? "The ask could not be sent.");
         const unavailable = result.status === 404 && !result.code;
         setState((s) => ({
           ...s,
@@ -1398,6 +1441,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
         }));
         return result;
       }
+      confirmQuestion(dismissed);
       announceAsk();
       const request = result.data?.request ?? null;
       const next = request?.app_session_id ?? sessionRef.current ?? null;
@@ -1414,7 +1458,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
           result.data?.files_attached === false
             ? "Your files did not go with that message because it is waiting its turn. Attach them again once it starts."
             : null,
-        data: s.data && next === s.data.session_id ? { ...s.data, state: "working", request: request ?? s.data.request } : s.data,
+        data: s.data && next === s.data.session_id ? (threadQuestionKey(s.data) && threadQuestionKey(s.data) !== dismissed?.key ? s.data : { ...s.data, state: "working", request: request ?? s.data.request }) : s.data,
       }));
       return result;
     },
@@ -1432,12 +1476,16 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
   const answer = useCallback(
     async ({ optionId, text, answers } = {}) => {
       if (!request?.id) return { ok: false, error: "nothing to answer" };
+      const dismissed = dismissQuestion();
       const r = await sendAnswer(request.id, { optionId, text, answers, at: needsAt ?? undefined });
+      if (!aliveRef.current) return r.ok ? { ok: true } : { ok: false, error: r.error, code: r.code ?? null };
+      if (!r.ok) restoreQuestion(dismissed, r.error ?? "That answer did not go through. Try again.");
       if (r.ok) {
+        confirmQuestion(dismissed);
         announceAsk();
-        setState((s) => (s.data ? { ...s, error: null, data: { ...s.data, state: "working", needs: null } } : s));
+        setState((s) => ({ ...s, error: null }));
       }
-      reload();
+      if (r.ok) reload();
       return r.ok ? { ok: true } : { ok: false, error: r.error, code: r.code ?? null };
     },
     [request?.id, needsAt, reload],
@@ -1445,6 +1493,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
   const openOnDesk = useCallback(() => (request ? openRequest(request) : false), [request]);
   const newChat = useCallback(() => {
     forget();
+    dismissedQuestions.current.clear();
     setState({ data: null, loading: false, sending: false, pending: null, error: null, code: null, unavailable: false });
   }, [forget]);
   // Another of the member's threads in this app (the pane's Chats list):
@@ -1453,6 +1502,7 @@ export function useAgentThread({ row, how, job = false, key, view = false } = {}
     (next) => {
       const id = typeof next === "string" && next ? next : null;
       if (!id || id === sessionRef.current) return;
+      dismissedQuestions.current.clear();
       keepThread(storeKey, id, me);
       setSessionId(id);
       setState({ data: null, loading: true, sending: false, pending: null, error: null, code: null, unavailable: false });