makersclaw 0.3.2 → 0.4.0

package/registry/blocks/job-panel/job-panel.jsx

@@ -8,7 +8,8 @@ import { Button, Card, Empty, Field, Icon, Skeleton, Textarea, cx } from "../../
 // keeps the four rules a hand-drawn panel breaks: it is not there when
 // nothing runs, it shows each step's label (the founder's phrase, never
 // the tool's name), the agent's text is its account and not the
-// deliverable (the rows are), and Stop / Close are always one press away.
+// deliverable (the rows are), and Stop / Close are always one press away
+// (Answer in Stop's place while the agent waits on the founder).
 //
 //   const job = useJob();
 //   <Button onClick={() => job.start("Draft a launch plan for Rowhouse")}>Generate a launch plan</Button>
@@ -24,10 +25,21 @@ import { Button, Card, Empty, Field, Icon, Skeleton, Textarea, cx } from "../../
 //             options={<Field …><Select …/></Field>}
 //             onGenerate={(prompt) => job.start(`Make a product photo: ${prompt}. Size ${size}.`)}
 //             results={photos.map((p) => <PhotoCard key={p.id} photo={p} />)} />
+//
+// Since 0.4.0 a job is a request, and its conversation lives in the
+// desk's agent column: the agent's questions and the founder's yes are
+// there, not here. So the panel reads two more states off the job, when
+// the job has them: needsYou (the agent waits on the founder — the
+// heading says so and Answer, in Stop's place, opens the question in the
+// column) and queued (one job per list runs at a time — the heading names
+// the job it waits behind). A 0.3.x job object has neither and draws
+// exactly as it always did.
 
 function StepMark({ status }) {
   if (status === "done") return <Icon name="check" size={14} className="shrink-0 text-success" />;
   if (status === "failed") return <Icon name="warning" size={14} className="shrink-0 text-destructive" />;
+  if (status === "needs") return <Icon name="circle-help" size={14} className="shrink-0 text-warning" />;
+  if (status === "queued") return <Icon name="clock" size={14} className="shrink-0 text-muted-foreground" />;
   return <span aria-hidden="true" className="mx-[3px] size-2 shrink-0 animate-pulse rounded-full bg-primary" />;
 }
 
@@ -36,11 +48,17 @@ export function JobPanel({ variant = "panel", ...props }) {
   return <Panel {...props} />;
 }
 
+// Waiting on the founder or on another job is still a live job: not over,
+// only paused. useJob counts both as running; an object of its own shape
+// that sets only the flag gets the same panel.
+const isLive = (job) => Boolean(job?.running || job?.needsYou || job?.queued);
+
 function Panel({
   job,
   title = "Working on it",
   doneTitle = "Done",
   failedTitle = "It stopped",
+  needsTitle = "Needs your answer",
   onRetry,
   autoClose = 6000,
   maxSteps = 6,
@@ -48,7 +66,9 @@ function Panel({
   className,
 }) {
   const textRef = useRef(null);
-  const running = Boolean(job?.running);
+  const needsYou = Boolean(job?.needsYou);
+  const queued = !needsYou && Boolean(job?.queued);
+  const running = isLive(job);
   const failed = !running && Boolean(job?.error);
   const done = !running && !failed && Boolean(job?.finishedAt);
 
@@ -67,23 +87,43 @@ function Panel({
 
   if (!job || !(running || failed || done)) return null;
 
-  const steps = job.steps ?? [];
+  // What the job waits on, if anything: its mark replaces the pulse.
+  const waiting = needsYou ? "needs" : queued ? "queued" : null;
+  const heading = needsYou
+    ? needsTitle
+    : queued
+      ? `Queued · after ${job.queuedAfter?.after_title ?? "the job before it"}`
+      : running
+        ? title
+        : failed
+          ? failedTitle
+          : doneTitle;
+  // A queued request's one step is its line, and its line is this
+  // heading again: say it once.
+  const steps = (job.steps ?? []).filter((step) => !(queued && step.label === heading));
   const hidden = Math.max(0, steps.length - maxSteps);
   const visible = steps.slice(hidden);
-  const heading = running ? title : failed ? failedTitle : doneTitle;
+  // The question is in the desk's agent column; open() takes the founder
+  // there. Without it there is nowhere to point, and Stop stays.
+  const answer = needsYou && typeof job.open === "function";
 
   return (
     <section
       aria-label={heading}
-      className={cx("rounded-lg border bg-card p-4 text-card-foreground", failed ? "border-destructive/50" : "border-border", className)}
+      className={cx(
+        "rounded-lg border bg-card p-4 text-card-foreground",
+        failed ? "border-destructive/50" : needsYou ? "border-warning/50" : "border-border",
+        className,
+      )}
     >
       <div className="flex items-start justify-between gap-3">
         <div className="min-w-0">
           <p aria-live="polite" className="flex items-center gap-2 text-sm font-semibold">
-            {running ? <StepMark status="running" /> : <StepMark status={failed ? "failed" : "done"} />}
+            <StepMark status={waiting ?? (running ? "running" : failed ? "failed" : "done")} />
             <span className="min-w-0">{heading}</span>
           </p>
           {failed ? <p className="mt-1 text-sm text-muted-foreground">{job.error}</p> : null}
+          {needsYou ? <p className="mt-1 text-sm text-muted-foreground">The question is in the agent column.</p> : null}
         </div>
         <div className="flex shrink-0 gap-2">
           {failed && onRetry ? (
@@ -91,7 +131,11 @@ function Panel({
               Try again
             </Button>
           ) : null}
-          {running ? (
+          {answer ? (
+            <Button size="sm" variant="secondary" onClick={() => job.open()}>
+              Answer
+            </Button>
+          ) : running ? (
             <Button size="sm" variant="quiet" onClick={() => job.cancel?.()}>
               Stop
             </Button>
@@ -107,12 +151,14 @@ function Panel({
           {hidden > 0 ? <li className="text-xs text-muted-foreground">{hidden} earlier {hidden === 1 ? "step" : "steps"}</li> : null}
           {visible.map((step, i) => (
             <li key={`${hidden + i}-${step.name}`} className="flex items-center gap-2">
-              <StepMark status={step.status} />
+              <StepMark status={waiting && step.status === "running" ? waiting : step.status} />
               <span className={step.status === "running" ? "text-foreground" : "text-muted-foreground"}>{step.label ?? "Working"}</span>
             </li>
           ))}
         </ol>
       ) : null}
+      {/* The agent's account, on the 0.3.x path. A request's text is empty
+          (its account is in the column), so the area is not drawn. */}
       {showText && job.text ? (
         <div
           ref={textRef}
@@ -159,6 +205,7 @@ function Generator({
   title = "Working on it",
   doneTitle = "Done",
   failedTitle = "It stopped",
+  needsTitle = "Needs your answer",
   onRetry,
   autoClose = 6000,
   maxSteps = 6,
@@ -175,7 +222,7 @@ function Generator({
     if (controlled === undefined) setOwn(v);
     onPromptChange?.(v);
   };
-  const running = Boolean(job?.running);
+  const running = isLive(job);
   const canGenerate = !disabled && !running && !starting && (canGenerateEmpty || value.trim().length > 0);
 
   async function generate(text = value) {
@@ -192,8 +239,9 @@ function Generator({
     setStarting(false);
     if (r && r.ok === false && !r.aborted) setError(r.error ?? "It did not start");
   }
-  // useJob's start resolves when the job ends; a failure it reports is
-  // already the panel's error, so the field says only what the panel does not.
+  // useJob's start resolves when the ask is taken (on a 0.3.x claw, when
+  // the job ends); a failure it reports is already the panel's error, so
+  // the field says only what the panel does not.
   const fieldError = error && !job?.error ? error : null;
 
   const cols = { 1: "grid-cols-1", 2: "grid-cols-1 sm:grid-cols-2", 3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", 4: "grid-cols-2 lg:grid-cols-4" };
@@ -236,6 +284,7 @@ function Generator({
           title={title}
           doneTitle={doneTitle}
           failedTitle={failedTitle}
+          needsTitle={needsTitle}
           onRetry={onRetry ?? (lastPrompt.current || canGenerateEmpty ? () => generate(lastPrompt.current) : undefined)}
           autoClose={autoClose}
           maxSteps={maxSteps}

package/src/shadcn.mjs

@@ -104,7 +104,7 @@ function coreItem() {
     title: "Makersclaw kit",
     description:
       "The kit every Makersclaw block is built from — Button, Field, Select, Sheet, Tabs, Menu, Notice, Icon, Depiction — " +
-      "and the parts bound to data (RecordSwitcher, useFixture). Native elements under the project's own theme tokens.",
+      "and the parts bound to data (RecordSwitcher, useFixture, LiveEmpty). Native elements under the project's own theme tokens.",
     files,
     cssVars: CSS_VARS,
     css: CSS,