makersclaw 0.3.2 → 0.5.1

package/registry/blocks/chart/sparkline.jsx

@@ -2,7 +2,7 @@
 
 import { useId } from "react";
 import { cx } from "../../ui";
-import { defaultFormat, idFrom, num, tone, useReveal, useWidth } from "./core";
+import { defaultFormat, idFrom, num, runs, tone, useReveal, useWidth } from "./core";
 
 // Sparkline — a trend with no axes, the size of a line of text: beside a
 // KPI, in a table cell. Its scale is its own low to high (not zero), so
@@ -26,14 +26,20 @@ export function Sparkline({
   const [boxRef, width] = useWidth();
   const shown = useReveal(width > 0);
 
-  const vals = (Array.isArray(data) ? data : []).map((d) => num(typeof d === "object" && d !== null ? d[value] : d)).filter((v) => v != null);
+  // Every entry keeps its place along the width; a missing one is a gap —
+  // the line breaks there — never a zero. The scale is the values there are.
+  const raw = (Array.isArray(data) ? data : []).map((d) => num(typeof d === "object" && d !== null ? d[value] : d));
+  const vals = raw.filter((v) => v != null);
   const n = vals.length;
   const lo = n ? Math.min(...vals) : 0;
   const hi = n ? Math.max(...vals) : 0;
   const pad = 3;
-  const px = (i) => pad + (n === 1 ? (width - pad * 2) / 2 : (i * (width - pad * 2)) / (n - 1));
+  const px = (i) => pad + (raw.length === 1 ? (width - pad * 2) / 2 : (i * (width - pad * 2)) / (raw.length - 1));
   const py = (v) => pad + (hi === lo ? (height - pad * 2) / 2 : (1 - (v - lo) / (hi - lo)) * (height - pad * 2));
-  const line = vals.map((v, i) => `${i ? "L" : "M"}${f(px(i))},${f(py(v))}`).join("");
+  const segs = runs(raw.map((v, i) => (v == null ? null : [px(i), py(v)])));
+  const path = (seg) => seg.map(([x, y], i) => `${i ? "L" : "M"}${f(x)},${f(y)}`).join("");
+  const lastSeg = segs[segs.length - 1];
+  const last = lastSeg?.[lastSeg.length - 1];
   const words = n
     ? `${label}: from ${format(vals[0])} to ${format(vals[n - 1])}, low ${format(lo)}, high ${format(hi)}.`
     : `${label}: no data yet.`;
@@ -68,16 +74,28 @@ export function Sparkline({
                 </mask>
               </defs>
               <g clipPath={`url(#${uid}-clip)`}>
-                {area && n > 1 ? (
-                  <path
-                    d={`${line}L${f(px(n - 1))},${height}L${f(px(0))},${height}Z`}
-                    className={tone(t, "fill")}
-                    fillOpacity={0.3}
-                    mask={`url(#${uid}-fade)`}
-                  />
-                ) : null}
-                <path d={line} fill="none" className={tone(t, "stroke")} strokeWidth={1.75} strokeLinejoin="round" strokeLinecap="round" />
-                {dot ? <circle cx={px(n - 1)} cy={py(vals[n - 1])} r={2.5} className={tone(t, "fill")} /> : null}
+                {area
+                  ? segs.map((seg, k) =>
+                      seg.length > 1 ? (
+                        <path
+                          key={k}
+                          d={`${path(seg)}L${f(seg[seg.length - 1][0])},${height}L${f(seg[0][0])},${height}Z`}
+                          className={tone(t, "fill")}
+                          fillOpacity={0.3}
+                          mask={`url(#${uid}-fade)`}
+                        />
+                      ) : null,
+                    )
+                  : null}
+                {segs.map((seg, k) =>
+                  seg.length > 1 ? (
+                    <path key={k} d={path(seg)} fill="none" className={tone(t, "stroke")} strokeWidth={1.75} strokeLinejoin="round" strokeLinecap="round" />
+                  ) : dot && seg === lastSeg ? null : (
+                    // A value alone between two gaps: a dot the line's width.
+                    <circle key={k} cx={seg[0][0]} cy={seg[0][1]} r={1.75} className={tone(t, "fill")} />
+                  ),
+                )}
+                {dot ? <circle cx={last[0]} cy={last[1]} r={2.5} className={tone(t, "fill")} /> : null}
               </g>
             </>
           )}

package/registry/blocks/chat/message.jsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useId, useRef, useState } from "react";
-import { Avatar, Button, Collapsible, IconButton, Icon, Menu, Spinner, Textarea, Toggle, Tooltip, cx } from "../../ui";
+import { Avatar, Button, Collapsible, IconButton, Icon, Menu, Spinner, Textarea, Toggle, Tooltip, cx, toLocalDate } from "../../ui";
 import { Attachment } from "./attachment";
 import { ChatText } from "./text";
 
@@ -25,10 +25,10 @@ export function textOf(message) {
     .join("");
 }
 
+/** A Date, an ISO time or a day alone ("2026-09-28": that day's local
+ *  midnight, never UTC's) → a Date; null when it is none. */
 export function toDate(value) {
-  if (value == null || value === "") return null;
-  const d = value instanceof Date ? value : new Date(value);
-  return Number.isNaN(d.getTime()) ? null : d;
+  return toLocalDate(value);
 }
 
 export function formatTime(date) {

package/registry/blocks/comment-box/README.md

@@ -30,7 +30,7 @@ A comment in `comments`:
   id: "c-81",
   author: { id: "u-lena", name: "Lena Fischer", src: "https://…/lena.jpg" },   // or just "Lena Fischer"
   body: [ /* the doc onPost gave you */ ],   // or a plain string
-  createdAt: "2026-09-23T09:12:00Z",          // ISO string, Date or ms
+  createdAt: "2026-09-23T09:12:00Z",          // ISO string, Date, ms, or a day ("2026-09-23": that day, never UTC's)
   edited: false,                              // true adds "(edited)"
 }
 ```

package/registry/blocks/comment-box/comment-time.jsx

@@ -8,7 +8,7 @@
 // tick (not a timer per comment) keeps every label current. The full date
 // is always in the title.
 import { useEffect, useState } from "react";
-import { cx } from "../../ui";
+import { cx, toLocalDate } from "../../ui";
 
 const listeners = new Set();
 let timer = null;
@@ -34,11 +34,9 @@ export function useNow() {
   return now;
 }
 
-export const toDate = (v) => {
-  if (v === undefined || v === null || v === "") return null;
-  const d = v instanceof Date ? v : new Date(v);
-  return Number.isNaN(d.getTime()) ? null : d;
-};
+/** A Date, an ISO time or a day alone ("2026-09-28", a `date` column: that
+ *  day's local midnight, never UTC's) → a Date; null when it is none. */
+export const toDate = (v) => toLocalDate(v);
 
 const fmt = (opts) => new Intl.DateTimeFormat(undefined, opts);
 const TIME = { hour: "numeric", minute: "2-digit" };

package/registry/blocks/data-table/README.md

@@ -70,6 +70,10 @@ one can carry its own (report-table's `kind`).
 - `label` — what the table is called to a screen reader, default `"Table"`.
 - `noun` — what a row is ("invoice"): used in "1–10 of 60 invoices", the
   facet counts and the announcements. Default `"row"`.
+- `nounPlural` — the plural, when the regular ending is wrong for it:
+  `noun="person" nounPlural="people"`. Default: `noun` with the regular
+  English ending — "invoice" → "invoices", "company" → "companies",
+  "address" → "addresses", "batch" → "batches", "analysis" → "analyses".
 
 Search
 

package/registry/blocks/data-table/data-table.jsx

@@ -101,7 +101,19 @@ function humanize(key) {
   return text ? text.charAt(0).toUpperCase() + text.slice(1) : "";
 }
 
-function plural(n, one, many = `${one}s`) {
+/** A noun's plural by the regular English endings: "invoice" → "invoices",
+ *  "company" → "companies", "address" → "addresses", "batch" → "batches",
+ *  "analysis" → "analyses". Anything else is the table's `nounPlural`
+ *  ("person" → "people"). Until 0.5.1 it only added "s": "11 companys". */
+export function pluralOf(noun) {
+  const s = String(noun ?? "");
+  if (/[^aeiou]y$/.test(s)) return `${s.slice(0, -1)}ies`;
+  if (/sis$/.test(s)) return `${s.slice(0, -2)}es`;
+  if (/(?:s|x|z|ch|sh)$/.test(s)) return `${s}es`;
+  return `${s}s`;
+}
+
+function plural(n, one, many = pluralOf(one)) {
   return `${n.toLocaleString()} ${n === 1 ? one : many}`;
 }
 
@@ -186,12 +198,14 @@ export function DataTable({
   emptyAction,
   emptyIcon = "inbox",
   noun = "row",
+  nounPlural,
   mobile = "scroll",
   cardTitle,
   variant = "outline",
   className,
 }) {
   const uid = useId().replace(/[^\w-]/g, "");
+  const nouns = nounPlural || pluralOf(noun);
   const all = rows ?? NONE;
   const cols = useMemo(() => (columns ?? []).map((c) => ({ ...c, key: String(c.key), header: c.header ?? humanize(c.key) })), [columns]);
   const facetList = useMemo(
@@ -261,8 +275,8 @@ export function DataTable({
   }, [current, pageCount, loading]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    if (!loading && narrowed) setAnnounce(total === 0 ? "No matches" : `${plural(total, noun)} match`);
-  }, [total, narrowed, loading, noun]);
+    if (!loading && narrowed) setAnnounce(total === 0 ? "No matches" : `${plural(total, noun, nouns)} match`);
+  }, [total, narrowed, loading, noun, nouns]);
 
   // ---- changes that move back to page 1 ---------------------------------
 
@@ -358,7 +372,7 @@ export function DataTable({
       return;
     }
     if (action.keepSelection !== true) setPicked([]);
-    setAnnounce(`${action.label}: done for ${plural(real.length, noun)}`);
+    setAnnounce(`${action.label}: done for ${plural(real.length, noun, nouns)}`);
   }
 
   // ---- drawing -----------------------------------------------------------
@@ -588,7 +602,7 @@ export function DataTable({
     <Empty
       icon="search"
       title="No matches"
-      body={narrowed ? "Nothing matches the search and filters." : `No ${noun}s on this page.`}
+      body={narrowed ? "Nothing matches the search and filters." : `No ${nouns} on this page.`}
       action={
         narrowed ? (
           <Button size="sm" icon="x" onClick={clearFilters}>
@@ -1137,7 +1151,7 @@ export function DataTable({
       {paginate && !body && (total > 0 || loading) ? (
         <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
           <p data-nums className="w-full text-sm text-muted-foreground sm:w-auto" id={`${uid}-range`}>
-            {loading ? "Loading…" : `${from.toLocaleString()}–${to.toLocaleString()} of ${plural(total, noun)}`}
+            {loading ? "Loading…" : `${from.toLocaleString()}–${to.toLocaleString()} of ${plural(total, noun, nouns)}`}
           </p>
           <Pagination
             page={pageNow}

package/registry/blocks/flow-canvas/edges.jsx

@@ -68,8 +68,10 @@ export function FlowEdge({ id, source, target, selected, data, label }) {
   const g = connectorGeometry(p1, sides.source, p2, sides.target, data?.line ?? "curved");
   const arrow = data?.arrow ?? "end";
   const editing = !readOnly && editingEdge === id;
-  const ink = selected ? "stroke-primary" : "stroke-muted-foreground [.react-flow__edge:hover_&]:stroke-foreground";
-  const fill = selected ? "fill-primary" : "fill-muted-foreground [.react-flow__edge:hover_&]:fill-foreground";
+  // `\_\_` and String.raw: an underscore in [...] is a space to Tailwind
+  // (theme.js says why).
+  const ink = selected ? "stroke-primary" : String.raw`stroke-muted-foreground [.react-flow\_\_edge:hover_&]:stroke-foreground`;
+  const fill = selected ? "fill-primary" : String.raw`fill-muted-foreground [.react-flow\_\_edge:hover_&]:fill-foreground`;
   return (
     <>
       <path d={g.d} fill="none" stroke="transparent" strokeWidth={18} className="react-flow__edge-interaction" />

package/registry/blocks/flow-canvas/theme.js

@@ -10,71 +10,82 @@
 // one thing that outranks it. Our own nodes and connectors draw with
 // token classes directly (nodes.jsx, edges.jsx), so the library's node and
 // edge colours are never seen.
+//
+// React Flow's classes are BEM, `react-flow__node`, and Tailwind reads an
+// underscore inside [...] as a space: written plainly, every rule below
+// compiled to `.react-flow node`, which matches nothing, and none of this
+// theme ever reached the page — the attribution was the library's grey box
+// with its grey text, unreadable on a dark workspace (makersclaw-store
+// BLOCKS.md, mind-maps 0.1.0). `\_` keeps an underscore, and String.raw
+// keeps the backslash in the class name, where the rule Tailwind builds
+// from this file's text expects it. Every React Flow class below is
+// written rf`…`; test/cli.test.mjs refuses a plain one in any block.
+const rf = String.raw;
 export const THEME = [
   // the canvas: the page's background with dots in the muted ink
   "[--xy-background-color:transparent]!",
   "[--xy-background-pattern-color:var(--color-muted-foreground)]!",
-  "[&_.react-flow__background]:opacity-35!",
+  rf`[&_.react-flow\_\_background]:opacity-35!`,
   // the marquee, and the box around a multi-selection
-  "[&_.react-flow__selection]:bg-primary/8!",
-  "[&_.react-flow__selection]:border!",
-  "[&_.react-flow__selection]:border-solid!",
-  "[&_.react-flow__selection]:border-primary/70!",
-  "[&_.react-flow__selection]:rounded-sm!",
-  "[&_.react-flow__nodesselection-rect]:bg-transparent!",
-  "[&_.react-flow__nodesselection-rect]:border!",
-  "[&_.react-flow__nodesselection-rect]:border-dashed!",
-  "[&_.react-flow__nodesselection-rect]:border-primary/60!",
-  "[&_.react-flow__nodesselection-rect]:rounded-sm!",
+  rf`[&_.react-flow\_\_selection]:bg-primary/8!`,
+  rf`[&_.react-flow\_\_selection]:border!`,
+  rf`[&_.react-flow\_\_selection]:border-solid!`,
+  rf`[&_.react-flow\_\_selection]:border-primary/70!`,
+  rf`[&_.react-flow\_\_selection]:rounded-sm!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:bg-transparent!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:border!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:border-dashed!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:border-primary/60!`,
+  rf`[&_.react-flow\_\_nodesselection-rect]:rounded-sm!`,
   // the line drawn while a connector is being dragged out
-  "[&_.react-flow__connection-path]:stroke-primary!",
-  "[&_.react-flow__connection-path]:[stroke-width:2]!",
+  rf`[&_.react-flow\_\_connection-path]:stroke-primary!`,
+  rf`[&_.react-flow\_\_connection-path]:[stroke-width:2]!`,
   // cursors that match the tool (flow-canvas.jsx sets data-tool on the root)
-  "[&_.react-flow__pane.selection]:cursor-default!",
-  "[&_.react-flow__node.draggable]:cursor-default!",
-  "[&_.react-flow__node.draggable.dragging]:cursor-grabbing!",
-  "data-[tool=hand]:[&_.react-flow__pane]:cursor-grab!",
-  "data-[tool=hand]:[&_.react-flow__pane.dragging]:cursor-grabbing!",
-  "data-[tool=hand]:[&_.react-flow__node]:cursor-grab!",
-  "data-[tool=place]:[&_.react-flow__pane]:cursor-crosshair!",
-  "data-[tool=text]:[&_.react-flow__pane]:cursor-text!",
-  "data-[tool=connector]:[&_.react-flow__node]:cursor-crosshair!",
+  rf`[&_.react-flow\_\_pane.selection]:cursor-default!`,
+  rf`[&_.react-flow\_\_node.draggable]:cursor-default!`,
+  rf`[&_.react-flow\_\_node.draggable.dragging]:cursor-grabbing!`,
+  rf`data-[tool=hand]:[&_.react-flow\_\_pane]:cursor-grab!`,
+  rf`data-[tool=hand]:[&_.react-flow\_\_pane.dragging]:cursor-grabbing!`,
+  rf`data-[tool=hand]:[&_.react-flow\_\_node]:cursor-grab!`,
+  rf`data-[tool=place]:[&_.react-flow\_\_pane]:cursor-crosshair!`,
+  rf`data-[tool=text]:[&_.react-flow\_\_pane]:cursor-text!`,
+  rf`data-[tool=connector]:[&_.react-flow\_\_node]:cursor-crosshair!`,
   // keyboard focus on a card: a visible ring (the library turns it off)
-  "[&_.react-flow__node:focus-visible]:outline-2!",
-  "[&_.react-flow__node:focus-visible]:outline-offset-4!",
-  "[&_.react-flow__node:focus-visible]:outline-ring!",
-  "[&_.react-flow__node:focus-visible]:[outline-style:solid]!",
+  rf`[&_.react-flow\_\_node:focus-visible]:outline-2!`,
+  rf`[&_.react-flow\_\_node:focus-visible]:outline-offset-4!`,
+  rf`[&_.react-flow\_\_node:focus-visible]:outline-ring!`,
+  rf`[&_.react-flow\_\_node:focus-visible]:[outline-style:solid]!`,
   // frames: only their title and edge take the pointer, so a double-click
   // or a marquee inside one lands on the canvas (nodes.jsx)
-  "[&_.react-flow__node-frame]:pointer-events-none!",
+  rf`[&_.react-flow\_\_node-frame]:pointer-events-none!`,
   // the resize handles on a selected card
-  "[&_.react-flow__resize-control.handle]:size-2.5!",
-  "[&_.react-flow__resize-control.handle]:rounded-xs!",
-  "[&_.react-flow__resize-control.handle]:border-primary!",
-  "[&_.react-flow__resize-control.handle]:bg-background!",
-  "[&_.react-flow__resize-control.handle]:pointer-events-auto!",
-  "[&_.react-flow__resize-control.line]:border-primary/0!",
-  "[&_.react-flow__resize-control.line]:pointer-events-auto!",
-  "[&_.react-flow__resize-control.line.left]:w-2!",
-  "[&_.react-flow__resize-control.line.right]:w-2!",
-  "[&_.react-flow__resize-control.line.top]:h-2!",
-  "[&_.react-flow__resize-control.line.bottom]:h-2!",
+  rf`[&_.react-flow\_\_resize-control.handle]:size-2.5!`,
+  rf`[&_.react-flow\_\_resize-control.handle]:rounded-xs!`,
+  rf`[&_.react-flow\_\_resize-control.handle]:border-primary!`,
+  rf`[&_.react-flow\_\_resize-control.handle]:bg-background!`,
+  rf`[&_.react-flow\_\_resize-control.handle]:pointer-events-auto!`,
+  rf`[&_.react-flow\_\_resize-control.line]:border-primary/0!`,
+  rf`[&_.react-flow\_\_resize-control.line]:pointer-events-auto!`,
+  rf`[&_.react-flow\_\_resize-control.line.left]:w-2!`,
+  rf`[&_.react-flow\_\_resize-control.line.right]:w-2!`,
+  rf`[&_.react-flow\_\_resize-control.line.top]:h-2!`,
+  rf`[&_.react-flow\_\_resize-control.line.bottom]:h-2!`,
   // the minimap: a card with the board in muted ink
   "[--xy-minimap-background-color:var(--color-card)]!",
   "[--xy-minimap-node-background-color:var(--color-muted-foreground)]!",
   "[--xy-minimap-mask-background-color:var(--color-muted)]!",
-  "[&_.react-flow__minimap]:rounded-lg!",
-  "[&_.react-flow__minimap]:border!",
-  "[&_.react-flow__minimap]:border-border!",
-  "[&_.react-flow__minimap]:shadow-md!",
-  "[&_.react-flow__minimap]:overflow-hidden!",
-  "[&_.react-flow__minimap-node]:opacity-50!",
-  "[&_.react-flow__minimap-mask]:opacity-70!",
+  rf`[&_.react-flow\_\_minimap]:rounded-lg!`,
+  rf`[&_.react-flow\_\_minimap]:border!`,
+  rf`[&_.react-flow\_\_minimap]:border-border!`,
+  rf`[&_.react-flow\_\_minimap]:shadow-md!`,
+  rf`[&_.react-flow\_\_minimap]:overflow-hidden!`,
+  rf`[&_.react-flow\_\_minimap-node]:opacity-50!`,
+  rf`[&_.react-flow\_\_minimap-mask]:opacity-70!`,
   // React Flow's credit: kept (they ask for it), in the muted ink
-  "[&_.react-flow__attribution]:bg-transparent!",
-  "[&_.react-flow__attribution_a]:text-muted-foreground!",
+  rf`[&_.react-flow\_\_attribution]:bg-transparent!`,
+  rf`[&_.react-flow\_\_attribution_a]:text-muted-foreground!`,
   // panels: ours sit in the corners with our own spacing
-  "[&_.react-flow__panel]:m-3!",
+  rf`[&_.react-flow\_\_panel]:m-3!`,
 ].join(" ");
 
 // Colour TOKENS → classes, written out whole so Tailwind generates them. A

package/registry/blocks/job-panel/README.md

@@ -6,6 +6,13 @@ then "done" (closing itself a few seconds later) or the reason it
 stopped. When no job runs it renders nothing — a panel that is always
 there is a monitoring console, and apps do not have one.
 
+The conversation is not here. Since 0.4.0 a job is a request, and its
+conversation lives in the desk's agent column: the agent's questions,
+the founder's answers and the yes before it acts are all there. The
+panel says where the work is and points there — "Needs your answer"
+with an Answer button when the agent waits on the founder, "Queued ·
+after …" when it waits its turn.
+
 ```jsx
 import { JobPanel } from "../components/blocks/job-panel";   // a Makersclaw app ("./blocks/job-panel" from components/)
 import { JobPanel } from "@/components/makersclaw/blocks/job-panel";   // a shadcn project
@@ -26,11 +33,16 @@ pass those rows back in as `results`.
 - `job` — what `useJob()` returns. Required. Outside Makersclaw, any
   object of the same shape: `running`, `steps` (`[{ name, label, status:
   "running" | "done" | "failed" }]`), `text`, `error`, `finishedAt`, and
-  `cancel()` / `reset()`.
+  `cancel()` / `reset()`. Optional, read when present (useJob sets them
+  since 0.4.0): `needsYou`, `queued`, `queuedAfter` (`{ after_title }`)
+  and `open()` — see "Needs you and queued" below. An object without
+  them (the 0.3.x shape) draws exactly as before.
 - `title` — while it runs, what the agent is doing, in the founder's
   words: `"Drafting the launch plan"`. Default `"Working on it"`.
 - `doneTitle` — after a clean finish: `"Launch plan drafted"`.
 - `failedTitle` — when it stopped with an error; the error follows it.
+- `needsTitle` — while the agent waits on the founder's answer. Default
+  `"Needs your answer"`.
 - `onRetry` — shows "Try again" beside Close when the job failed: start
   the same job again.
 - `autoClose` — milliseconds after a clean finish before the panel
@@ -40,12 +52,15 @@ pass those rows back in as `results`.
   "N earlier steps" line.
 - `showText` — the agent's own account under the steps, default true. It
   is what the agent says it did, never the result: the result is rows.
+  It hides itself when `job.text` is empty, as it is on a request: the
+  account is in the desk's agent column.
 - `className` — layout around it. Never colour.
 
 ### The generator (`variant="generator"`)
 
-Everything above (`job`, `title`, `doneTitle`, `failedTitle`, `onRetry`,
-`autoClose`, `maxSteps`, `showText`) goes to the panel inside it. Then:
+Everything above (`job`, `title`, `doneTitle`, `failedTitle`,
+`needsTitle`, `onRetry`, `autoClose`, `maxSteps`, `showText`) goes to the
+panel inside it. Then:
 
 - `onGenerate(prompt)` — start the job. Build the ask from the prompt and
   your options and call `job.start(ask)`; return what it returns, or
@@ -72,6 +87,28 @@ Everything above (`job`, `title`, `doneTitle`, `failedTitle`, `onRetry`,
 - `layout` — `"stacked"` (default: the form, then the shelf) or
   `"split"` (side by side from lg up; stacked on a phone).
 
+## Needs you and queued
+
+A request can be live and still not moving. The panel draws two such
+states from the job, and both count as running: no Close, Generate
+stays off, and the panel stays until the job moves on.
+
+- **Needs you** (`job.needsYou`) — the agent stopped to ask the founder
+  something, or for a yes before it acts. The heading is `needsTitle`
+  ("Needs your answer"), the panel takes the warning tone, a line says
+  the question is in the agent column, and **Answer** takes Stop's
+  place: it calls `job.open()`, which opens the request's conversation
+  in the desk's agent column. The founder answers there (or stops it
+  there), never in the app; the job then runs on and the panel follows
+  it. A job with no `open()` has nowhere to point, so Stop stays.
+- **Queued** (`job.queued`) — one job per list runs at a time, so this
+  one waits behind another. The heading names the job it waits for:
+  "Queued · after Find 20 leads" (`job.queuedAfter.after_title`, else
+  "the job before it"). Stop stays: it takes the job out of the queue.
+
+When it runs again the heading is back to `title`, and the one step
+under it is the request's line ("Drafting · 12 of 50").
+
 ## Example
 
 ```jsx

package/registry/blocks/job-panel/block.json

@@ -1,9 +1,9 @@
 {
   "name": "job-panel",
   "title": "JobPanel",
-  "description": "The panel that follows work the founder asked the app's agent for (useJob): each step's label as it runs, Stop, then done or the reason it stopped — and nothing on screen when no job runs. variant=\"generator\" wraps it in a prompt, the surface's options, Generate and a results shelf, with no model, provider or API key of its own.",
+  "description": "The panel that follows work the founder asked the app's agent for (useJob): each step's label as it runs, Stop, \"Needs your answer\" with Answer while the agent waits on the founder, \"Queued · after …\" while it waits its turn, then done or the reason it stopped — and nothing on screen when no job runs. variant=\"generator\" wraps it in a prompt, the surface's options, Generate and a results shelf, with no model, provider or API key of its own.",
   "useWhen": "A surface has a verb that asks the agent to make or find something (\"Generate a launch plan\", \"Find 20 leads\", \"Plan next sprint\") and the founder should watch it happen where the result will land. variant=\"generator\" when the screen IS the place to ask: a prompt and a few options, the results under them (product photos, ad copy, names).",
-  "tags": ["job", "agent", "generate", "progress", "steps", "running", "working", "commission", "ai", "stop", "status", "generator", "prompt", "results", "image", "studio"],
+  "tags": ["job", "agent", "generate", "progress", "steps", "running", "working", "commission", "ai", "stop", "status", "queued", "needs-you", "answer", "generator", "prompt", "results", "image", "studio"],
   "exports": ["JobPanel"],
   "files": ["index.js", "job-panel.jsx"],
   "requires": []

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

@@ -2,7 +2,10 @@
 
 // JobPanel driven by a pretend job — the gallery's and the smoke test's
 // surface. Not installed into apps. Three variants behind the switcher:
-//   Panel    the panel under a verb; one run succeeds, one fails
+//   Panel    the panel under a verb; one run succeeds, one fails (both
+//            the 0.3.x shape), one waits its turn (queued), one stops
+//            to ask the founder (needsYou) — the last two a request's
+//            shape, the way useJob follows one since 0.4.0
 //   Photos   variant="generator", stacked: a prompt, size and style, a
 //            grid of results
 //   Copy     variant="generator", split: ad headlines as text results,
@@ -14,6 +17,24 @@ import { JobPanel } from "../components/blocks/job-panel";
 const STEPS = ["Reading the product list", "Searching the web", "Drafting the plan", "Saving 6 tasks"];
 const IDLE = { running: false, steps: [], text: "", error: null, finishedAt: null, progress: 0 };
 
+const CLOSED = new Set(["done", "stopped", "didnt_finish"]);
+
+// A request as useJob draws it since 0.4.0: one step, the request's line,
+// and no text — the agent's account is in the desk's agent column.
+function request(status, line, more = {}) {
+  return {
+    running: !CLOSED.has(status),
+    status,
+    queued: status === "queued",
+    queuedAfter: null,
+    needsYou: status === "needs_you",
+    liveLine: line,
+    steps: [{ name: "request", label: line, status: CLOSED.has(status) ? "done" : "running" }],
+    text: "",
+    ...more,
+  };
+}
+
 function usePretendJob() {
   const [state, setState] = useState(IDLE);
   const timers = useRef([]);
@@ -23,8 +44,34 @@ function usePretendJob() {
   };
   useEffect(() => clear, []);
   const later = (ms, fn) => timers.current.push(setTimeout(fn, ms));
-  function start(fail) {
+  const moved = (next) => setState((s) => ({ ...s, ...next, progress: s.progress + 1 }));
+
+  // The work after the wait: counted progress, then a result.
+  function draft(from) {
+    for (let n = 0; n <= 6; n += 1) later(from + 450 * n, () => moved(request("working", `Drafting the plan · ${n} of 6`, { count: n, target: 6 })));
+    later(from + 450 * 6 + 500, () => moved({ ...request("done", "6 tasks saved to Launches"), finishedAt: new Date().toISOString() }));
+  }
+
+  // kind: "ok" | "fails" (the 0.3.x shape: steps and text) · "queued" |
+  // "asks" (a request's shape).
+  function start(kind = "ok") {
     clear();
+    if (kind === "queued") {
+      setState({
+        ...IDLE,
+        ...request("queued", "Queued · after Find 20 leads", {
+          queuedAfter: { reason: "job", after_id: "req_leads", after_title: "Find 20 leads" },
+        }),
+      });
+      draft(2800);
+      return;
+    }
+    if (kind === "asks") {
+      setState({ ...IDLE, ...request("working", "Reading the product list") });
+      later(1200, () => moved(request("needs_you", "Needs you · Which launch should the plan cover?")));
+      return;
+    }
+    const fail = kind === "fails";
     setState({ ...IDLE, running: true });
     STEPS.forEach((label, i) =>
       later(700 * i + 200, () =>
@@ -53,12 +100,28 @@ function usePretendJob() {
     start,
     cancel: () => {
       clear();
-      setState((s) => ({ ...s, running: false, finishedAt: new Date().toISOString() }));
+      setState((s) => ({
+        ...s,
+        running: false,
+        queued: false,
+        needsYou: false,
+        status: s.status ? "stopped" : s.status,
+        finishedAt: new Date().toISOString(),
+      }));
     },
     reset: () => {
       clear();
       setState(IDLE);
     },
+    // In an app this opens the question in the desk's agent column. The
+    // gallery has no desk, so the answer is pretended and the work goes on.
+    open: () => {
+      if (!state.needsYou) return false;
+      clear();
+      moved(request("working", "Drafting the plan"));
+      draft(900);
+      return true;
+    },
   };
 }
 
@@ -67,14 +130,20 @@ function PanelDemo() {
   return (
     <div className="grid max-w-xl gap-4">
       <div className="flex flex-wrap gap-2">
-        <Button variant="secondary" onClick={() => job.start(false)} disabled={job.running}>
+        <Button variant="secondary" onClick={() => job.start("ok")} disabled={job.running}>
           Generate a launch plan
         </Button>
-        <Button variant="quiet" onClick={() => job.start(true)} disabled={job.running}>
+        <Button variant="quiet" onClick={() => job.start("fails")} disabled={job.running}>
           Run one that fails
         </Button>
+        <Button variant="quiet" onClick={() => job.start("queued")} disabled={job.running}>
+          Queue one behind another
+        </Button>
+        <Button variant="quiet" onClick={() => job.start("asks")} disabled={job.running}>
+          Run one that asks
+        </Button>
       </div>
-      <JobPanel job={job} title="Drafting the launch plan" doneTitle="Launch plan drafted" onRetry={() => job.start(false)} />
+      <JobPanel job={job} title="Drafting the launch plan" doneTitle="Launch plan drafted" onRetry={() => job.start("ok")} />
     </div>
   );
 }