makersclaw 0.1.0 → 0.3.0

package/registry/blocks/gantt/schedule.js

@@ -0,0 +1,278 @@
+// The gantt's arithmetic — pure, no React, no pixels read from the DOM.
+// The zoom levels, the window a timeline covers, its two header tiers,
+// where a day sits in pixels, what a drag or a resize saves (and which
+// waiting tasks it pushes along), and the elbow a dependency arrow takes.
+// The dates are task-model's: wall-calendar strings, day numbers for math.
+
+import {
+  addDays,
+  descendantIds,
+  diffDays,
+  endOfMonth,
+  formatDate,
+  isWeekend,
+  shiftDates,
+  spanOf,
+  spanPatch,
+  startOfMonth,
+  startOfWeek,
+  timeScale,
+} from "../task-model";
+
+/** The zoom levels: how wide a day is, what the columns are, how much
+ *  room the window keeps either side of the work, and its least length. */
+export const ZOOMS = {
+  day: { key: "day", label: "Day", unit: "day", dayWidth: 36, pad: 7, min: 56, top: "month" },
+  week: { key: "week", label: "Week", unit: "week", dayWidth: 16, pad: 14, min: 150, top: "month" },
+  month: { key: "month", label: "Month", unit: "month", dayWidth: 5, pad: 45, min: 420, top: "year" },
+  quarter: { key: "quarter", label: "Quarter", unit: "quarter", dayWidth: 1.75, pad: 90, min: 900, top: "year" },
+};
+
+export const zoomOf = (key) => ZOOMS[key] ?? ZOOMS.week;
+
+/** The first day of `day`'s column at `unit`. */
+export function unitStart(day, unit, weekStartsOn = 1) {
+  if (unit === "day" || unit === "week") return startOfWeek(day, weekStartsOn);
+  if (unit === "month") return startOfMonth(day);
+  return timeScale(day, day, "quarter")[0]?.start ?? day;
+}
+
+/** The last day of `day`'s column at `unit`. */
+export function unitEnd(day, unit, weekStartsOn = 1) {
+  if (unit === "day" || unit === "week") return addDays(startOfWeek(day, weekStartsOn), 6);
+  if (unit === "month") return endOfMonth(day);
+  return timeScale(day, day, "quarter")[0]?.end ?? day;
+}
+
+/** The window a timeline covers: every task's span and today, padded by
+ *  the zoom, snapped to whole columns, at least the zoom's `min` days.
+ *  → { from, to, days } */
+export function ganttRange(tasks, zoomKey, today, { weekStartsOn = 1 } = {}) {
+  const z = zoomOf(zoomKey);
+  let lo = null;
+  let hi = null;
+  for (const t of tasks ?? []) {
+    const s = spanOf(t);
+    if (!s) continue;
+    if (lo === null || s.start < lo) lo = s.start;
+    if (hi === null || s.end > hi) hi = s.end;
+  }
+  if (today) {
+    if (lo === null || today < lo) lo = today;
+    if (hi === null || today > hi) hi = today;
+  }
+  if (lo === null) return { from: null, to: null, days: 0 };
+  let from = unitStart(addDays(lo, -z.pad), z.unit, weekStartsOn);
+  let to = unitEnd(addDays(hi, z.pad), z.unit, weekStartsOn);
+  if (diffDays(from, to) + 1 < z.min) to = unitEnd(addDays(from, z.min - 1), z.unit, weekStartsOn);
+  return { from, to, days: diffDays(from, to) + 1 };
+}
+
+/** A day's left edge in pixels from the window's first day. */
+export function xOf(day, from, dayWidth) {
+  const d = diffDays(from, day);
+  return d === null ? null : d * dayWidth;
+}
+
+/** The two header tiers over [from, to], in pixels: `top` (months, or
+ *  years when zoomed out) and `bottom` (the zoom's columns), each
+ *  { key, start, end, x, w, label, weekend?, today? }. */
+export function headerTiers(from, to, zoomKey, { today, weekStartsOn = 1, locale } = {}) {
+  const z = zoomOf(zoomKey);
+  const place = (start, end) => {
+    const a = start < from ? from : start;
+    const b = end > to ? to : end;
+    return { x: xOf(a, from, z.dayWidth), w: (diffDays(a, b) + 1) * z.dayWidth };
+  };
+  const bottom = timeScale(from, to, z.unit, { weekStartsOn, locale }).map((c) => {
+    let label = c.label;
+    if (z.unit === "month") label = formatDate(c.start, { month: "short" }, { locale });
+    if (z.unit === "quarter") label = c.label.split(" ")[0];
+    return {
+      key: c.key,
+      start: c.start,
+      end: c.end,
+      label,
+      weekend: z.unit === "day" && isWeekend(c.start),
+      today: Boolean(today) && c.start <= today && today <= c.end,
+      ...place(c.start, c.end),
+    };
+  });
+  let top;
+  if (z.top === "month") {
+    top = timeScale(from, to, "month", { locale }).map((c) => ({
+      key: c.key,
+      start: c.start,
+      end: c.end,
+      label: formatDate(c.start, { month: "long", year: "numeric" }, { locale }),
+      ...place(c.start, c.end),
+    }));
+  } else {
+    top = [];
+    for (let y = +from.slice(0, 4); y <= +to.slice(0, 4); y++) {
+      const start = `${y}-01-01`;
+      const end = `${y}-12-31`;
+      top.push({ key: String(y), start, end, label: String(y), ...place(start, end) });
+    }
+  }
+  return { top, bottom };
+}
+
+/** The weekend columns of the window (day and week zoom), for shading. */
+export function weekendBands(from, to, zoomKey, weekend) {
+  const z = zoomOf(zoomKey);
+  if (z.unit !== "day" && z.unit !== "week") return [];
+  const out = [];
+  const n = diffDays(from, to);
+  for (let i = 0; i <= n; i++) {
+    const d = addDays(from, i);
+    if (!isWeekend(d, weekend)) continue;
+    const last = out[out.length - 1];
+    if (last && last.end === addDays(d, -1)) last.end = d;
+    else out.push({ start: d, end: d });
+  }
+  return out.map((b) => ({ ...b, x: xOf(b.start, from, z.dayWidth), w: (diffDays(b.start, b.end) + 1) * z.dayWidth }));
+}
+
+/** A milestone: a task marked `milestone: true` (or `type: "milestone"`).
+ *  It sits on one day, its due date (else its start). */
+export function isMilestone(task) {
+  return task?.milestone === true || task?.type === "milestone";
+}
+
+/** The span a row draws: its own, or — for a task with subtasks — the
+ *  union of its own and every descendant's (a summary bar). */
+export function summarySpan(task, tasks) {
+  let span = spanOf(task);
+  for (const id of descendantIds(tasks, task.id)) {
+    const s = spanOf(tasks.find((t) => t.id === id));
+    if (!s) continue;
+    span = span ? { start: s.start < span.start ? s.start : span.start, end: s.end > span.end ? s.end : span.end } : s;
+  }
+  return span;
+}
+
+/** What moving or stretching a task saves, as [{ id, patch }]:
+ *  - kind "move": its dates shift by `days` (its subtasks with it);
+ *  - kind "start" / "end": that edge moves by `days` (never past the other);
+ *  - with `push` (default), every task waiting on a moved one that would
+ *    now start on or before it ends slides later just enough, keeping its
+ *    length — and so on down the chain. Nothing is ever pulled earlier.
+ *  `days` 0 → []. The same answer drives the live preview and the save. */
+export function planMove(tasks, id, kind, days, { push = true } = {}) {
+  if (!days) return [];
+  const byId = new Map(tasks.map((t) => [t.id, t]));
+  const task = byId.get(id);
+  const span = spanOf(task);
+  if (!task || (!span && kind !== "move")) return [];
+  const patches = new Map();
+  const current = (tid) => ({ ...byId.get(tid), ...patches.get(tid) });
+  const set = (tid, patch) => patches.set(tid, { ...patches.get(tid), ...patch });
+
+  if (kind === "move") {
+    if (span) set(id, shiftDates(task, days));
+    for (const d of descendantIds(tasks, id)) if (spanOf(byId.get(d))) set(d, shiftDates(byId.get(d), days));
+  } else if (kind === "start") {
+    const next = addDays(span.start, days);
+    set(id, spanPatch(task, next > span.end ? span.end : next, span.end));
+  } else if (kind === "end") {
+    const next = addDays(span.end, days);
+    set(id, spanPatch(task, span.start, next < span.start ? span.start : next));
+  } else return [];
+
+  if (push) {
+    const waiting = new Map();
+    for (const t of tasks) for (const d of t.dependsOn ?? []) (waiting.get(d) ?? waiting.set(d, []).get(d)).push(t.id);
+    const queue = [...patches.keys()];
+    let guard = 0;
+    while (queue.length && guard++ < 5000) {
+      const from = queue.shift();
+      const fs = spanOf(current(from));
+      if (!fs) continue;
+      for (const to of waiting.get(from) ?? []) {
+        const ts = spanOf(current(to));
+        if (!ts || ts.start > fs.end) continue;
+        const by = diffDays(ts.start, fs.end) + 1;
+        set(to, shiftDates(current(to), by));
+        queue.push(to);
+      }
+    }
+  }
+  return [...patches].map(([pid, patch]) => ({ id: pid, patch }));
+}
+
+/** The patch that starts a task the day after the last of its blockers
+ *  ends, keeping its length (a date conflict's fix). null when it has no
+ *  scheduled blockers or already starts after them. */
+export function afterBlockersPatch(task, tasks) {
+  const span = spanOf(task);
+  if (!span) return null;
+  let last = null;
+  for (const d of task.dependsOn ?? []) {
+    const s = spanOf(tasks.find((t) => t.id === d));
+    if (s && (last === null || s.end > last)) last = s.end;
+  }
+  if (last === null || span.start > last) return null;
+  return shiftDates(task, diffDays(span.start, last) + 1);
+}
+
+/** A task's length in calendar days (1 for a one-day task), null when
+ *  it has no dates. */
+export function lengthOf(span) {
+  return span ? diffDays(span.start, span.end) + 1 : null;
+}
+
+/** An SVG path through `points` ([x, y] pairs) with its corners rounded
+ *  by `r` (less where a leg is short). */
+export function roundedPath(points, r = 4) {
+  const pts = points.filter((p, i) => i === 0 || p[0] !== points[i - 1][0] || p[1] !== points[i - 1][1]);
+  if (pts.length < 2) return "";
+  const f = (n) => Math.round(n * 10) / 10;
+  let d = `M${f(pts[0][0])} ${f(pts[0][1])}`;
+  for (let i = 1; i < pts.length - 1; i++) {
+    const [px, py] = pts[i - 1];
+    const [x, y] = pts[i];
+    const [nx, ny] = pts[i + 1];
+    const inLen = Math.hypot(x - px, y - py);
+    const outLen = Math.hypot(nx - x, ny - y);
+    const k = Math.min(r, inLen / 2, outLen / 2);
+    const ax = x - ((x - px) / (inLen || 1)) * k;
+    const ay = y - ((y - py) / (inLen || 1)) * k;
+    const bx = x + ((nx - x) / (outLen || 1)) * k;
+    const by = y + ((ny - y) / (outLen || 1)) * k;
+    d += ` L${f(ax)} ${f(ay)} Q${f(x)} ${f(y)} ${f(bx)} ${f(by)}`;
+  }
+  const last = pts[pts.length - 1];
+  return `${d} L${f(last[0])} ${f(last[1])}`;
+}
+
+/** The elbow from a finished task to the one waiting on it (finish to
+ *  start). Boxes are what the rows draw: { x0, x1, y (centre) }. When the
+ *  waiting task starts far enough right, the line runs out, turns and
+ *  enters from the left; when it does not (or it starts too early — a
+ *  conflict), it steps out, drops between the rows and comes back in.
+ *  → { d, head } — the line, and the arrowhead's path at its end. */
+export function arrowPath(a, b, { rowHeight = 36, gap = 10, radius = 4 } = {}) {
+  const sx = a.x1;
+  const sy = a.y;
+  const ex = b.x0;
+  const ey = b.y;
+  let points;
+  if (Math.abs(ey - sy) < 1) points = [[sx, sy], [ex, ey]];
+  else if (ex - gap >= sx + gap) points = [[sx, sy], [ex - gap, sy], [ex - gap, ey], [ex, ey]];
+  else {
+    const mid = sy + (ey > sy ? rowHeight / 2 : -rowHeight / 2);
+    points = [[sx, sy], [sx + gap, sy], [sx + gap, mid], [ex - gap, mid], [ex - gap, ey], [ex, ey]];
+  }
+  const f = (n) => Math.round(n * 10) / 10;
+  const head = `M${f(ex - 5)} ${f(ey - 3.5)} L${f(ex)} ${f(ey)} L${f(ex - 5)} ${f(ey + 3.5)} Z`;
+  return { d: roundedPath(points, radius), head };
+}
+
+/** Pixels → whole days at a zoom (a drag's delta, rounded to the nearest
+ *  day; never -0). */
+export function daysFromPixels(px, dayWidth) {
+  const n = Math.round((px || 0) / dayWidth);
+  return n === 0 ? 0 : n;
+}
+

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

@@ -7,16 +7,26 @@ stopped. When no job runs it renders nothing — a panel that is always
 there is a monitoring console, and apps do not have one.
 
 ```jsx
-import { JobPanel } from "../components/blocks/job-panel";   // "./blocks/job-panel" from components/
+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
 ```
 
 A client component. It takes the object `useJob()` returns (lib/hooks.js,
 README §5 "Commissioning work") and draws it; starting the job stays with
 your surface.
 
+`variant="generator"` is the panel inside a small studio: a prompt, your
+options, Generate, the running job, and a shelf of what it made. It holds
+no model, provider or API key: Generate hands the prompt to the app's
+agent (`job.start`, or your `onGenerate`), the agent writes rows, and you
+pass those rows back in as `results`.
+
 ## Props
 
-- `job` — what `useJob()` returns. Required.
+- `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()`.
 - `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"`.
@@ -32,6 +42,36 @@ your surface.
   is what the agent says it did, never the result: the result is rows.
 - `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:
+
+- `onGenerate(prompt)` — start the job. Build the ask from the prompt and
+  your options and call `job.start(ask)`; return what it returns, or
+  `{ ok: false, error }` and the reason shows under the prompt. Default:
+  `job.start(prompt)`. Cmd/Ctrl+Enter in the prompt presses Generate.
+  Without `onRetry`, the panel's "Try again" re-runs the last prompt.
+- `prompt` / `onPromptChange(text)` — control the prompt; or
+  `defaultPrompt`. `promptLabel` ("What should it make?"), `placeholder`,
+  `promptHint`, `promptRows` (4).
+- `options` — your fields, in a two-column grid under the prompt (one
+  column on a phone): a size `Select`, a style `ToggleGroup`, a `Slider`.
+  Their values are yours; read them in `onGenerate`.
+- `generateLabel` ("Generate") · `generateIcon` ("wand") ·
+  `canGenerateEmpty` (false) · `disabled` (false).
+- `heading` · `description` — the form card's title and line under it.
+- `aside` — a node under the form: tips, a note on cost.
+- `results` — what the job made, as nodes (an array of cards, say). The
+  shelf draws them in `resultsColumns` columns (1–4; fewer on a phone).
+  `resultsTitle` ("Results") and `resultsActions` (nodes beside it).
+- `placeholderResult` — drawn at the top of the shelf while the job runs
+  (default a skeleton); the shelf is `aria-busy` meanwhile.
+- `emptyTitle` · `emptyBody` · `emptyState` — the shelf before anything
+  is made.
+- `layout` — `"stacked"` (default: the form, then the shelf) or
+  `"split"` (side by side from lg up; stacked on a phone).
+
 ## Example
 
 ```jsx
@@ -63,6 +103,50 @@ export default function Launches({ launches, reload }) {
 The verb sits on the object list beside the manual "New" (README §5, rule
 1), and the panel sits where the result will appear.
 
+A generator for product photos:
+
+```jsx
+"use client";
+import { useEffect, useState } from "react";
+import { useJob } from "../lib/hooks";
+import { Field, Image, Select } from "./ui";
+import { JobPanel } from "./blocks/job-panel";
+
+export default function PhotoStudio({ photos, reload }) {
+  const job = useJob();
+  const [size, setSize] = useState("square");
+  useEffect(() => { reload?.(); }, [job.progress]);   // new photos appear as they land
+
+  return (
+    <JobPanel
+      variant="generator"
+      job={job}
+      heading="New product photo"
+      promptLabel="Describe the photo"
+      options={
+        <Field id="size" label="Size">
+          <Select id="size" value={size} onChange={(e) => setSize(e.target.value)}
+                  options={[{ value: "square", label: "Square" }, { value: "portrait", label: "Portrait" }]} />
+        </Field>
+      }
+      onGenerate={(prompt) => job.start(`Make one ${size} product photo: ${prompt}. Save it to public.photos.`)}
+      title="Making the photo"
+      doneTitle="Photo saved"
+      results={photos.map((p) => <Image key={p.id} src={p.url} alt={p.prompt} ratio="square" rounded="lg" />)}
+      resultsColumns={3}
+    />
+  );
+}
+```
+
+What it will not do: call a model, hold a provider or an API key, or
+keep what was made. The agent does the work through the job; the rows
+are the results.
+
 Its files are fixed: `npm run check` refuses a change, and `makersclaw add
 job-panel` restores them. A different panel is your own component in
 `components/`, built from the kit.
+
+## Credits
+
+The generator variant is ported from Creative Tim UI (https://github.com/creativetimofficial/ui, ai-image-generator-01 and ai-video-generator-01, MIT), rewritten on the Makersclaw kit without its provider and API-key fields.

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.",
-  "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.",
-  "tags": ["job", "agent", "generate", "progress", "steps", "running", "working", "commission", "ai", "stop", "status"],
+  "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.",
+  "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"],
   "exports": ["JobPanel"],
   "files": ["index.js", "job-panel.jsx"],
   "requires": []

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

@@ -1,9 +1,14 @@
 "use client";
 
 // JobPanel driven by a pretend job — the gallery's and the smoke test's
-// surface. Not installed into apps.
+// surface. Not installed into apps. Three variants behind the switcher:
+//   Panel    the panel under a verb; one run succeeds, one fails
+//   Photos   variant="generator", stacked: a prompt, size and style, a
+//            grid of results
+//   Copy     variant="generator", split: ad headlines as text results,
+//            tips beside the form
 import { useEffect, useRef, useState } from "react";
-import { Button } from "../components/ui";
+import { Badge, Button, Card, Field, Icon, IconButton, Select, ToggleGroup, Switch } from "../components/ui";
 import { JobPanel } from "../components/blocks/job-panel";
 
 const STEPS = ["Reading the product list", "Searching the web", "Drafting the plan", "Saving 6 tasks"];
@@ -57,7 +62,7 @@ function usePretendJob() {
   };
 }
 
-export default function JobPanelDemo() {
+function PanelDemo() {
   const job = usePretendJob();
   return (
     <div className="grid max-w-xl gap-4">
@@ -73,3 +78,225 @@ export default function JobPanelDemo() {
     </div>
   );
 }
+
+// A pretend job for the generators: the steps tick by, then `onDone` adds
+// the results (the rows the agent would have written).
+function useGeneratorJob() {
+  const [state, setState] = useState(IDLE);
+  const timers = useRef([]);
+  const clear = () => {
+    timers.current.forEach(clearTimeout);
+    timers.current = [];
+  };
+  useEffect(() => clear, []);
+  const later = (ms, fn) => timers.current.push(setTimeout(fn, ms));
+  function start(steps, { fail = false, onDone } = {}) {
+    clear();
+    setState({ ...IDLE, running: true });
+    steps.forEach((label, i) =>
+      later(650 * i + 200, () =>
+        setState((s) => ({
+          ...s,
+          steps: [...s.steps.map((x) => ({ ...x, status: "done" })), { name: `step_${i}`, label, status: "running" }],
+        })),
+      ),
+    );
+    later(650 * steps.length + 300, () => {
+      if (!fail) onDone?.();
+      setState((s) =>
+        fail
+          ? { ...s, running: false, steps: s.steps.map((x, i) => ({ ...x, status: i === s.steps.length - 1 ? "failed" : "done" })), error: "The image service is busy. Nothing was saved." }
+          : { ...s, running: false, steps: s.steps.map((x) => ({ ...x, status: "done" })), finishedAt: new Date().toISOString(), progress: s.progress + 1 },
+      );
+    });
+    return { ok: true };
+  }
+  return {
+    ...state,
+    start,
+    cancel: () => {
+      clear();
+      setState((s) => ({ ...s, running: false, finishedAt: new Date().toISOString() }));
+    },
+    reset: () => {
+      clear();
+      setState(IDLE);
+    },
+  };
+}
+
+const SIZES = [
+  { value: "square", label: "Square · shop grid" },
+  { value: "portrait", label: "Portrait · story" },
+  { value: "wide", label: "Wide · banner" },
+];
+const RATIO_CLASS = { square: "aspect-square", portrait: "aspect-3/4", wide: "aspect-video" };
+
+function PhotosDemo() {
+  const job = useGeneratorJob();
+  const [size, setSize] = useState("square");
+  const [style, setStyle] = useState("daylight");
+  const [fail, setFail] = useState(false);
+  const [photos, setPhotos] = useState([
+    { id: "ph1", prompt: "Stoneware bowl on a linen cloth, morning window light", size: "square", style: "daylight" },
+    { id: "ph2", prompt: "Oak wall shelf with three plants and a clay jug", size: "square", style: "studio" },
+  ]);
+
+  return (
+    <div className="grid gap-3">
+      <Switch id="job-demo-fail" label="The next run fails" checked={fail} onChange={(e) => setFail(e.target.checked)} />
+      <JobPanel
+        variant="generator"
+        job={job}
+        heading="New product photo"
+        description="Pip makes it from your product photos and saves it to the catalogue."
+        promptLabel="Describe the photo"
+        placeholder="The large stoneware bowl on a kitchen table, lemons beside it…"
+        defaultPrompt="Linen apron hanging on a hook by a sunny window"
+        options={
+          <>
+            <Field id="job-demo-size" label="Size">
+              <Select id="job-demo-size" value={size} onChange={(e) => setSize(e.target.value)} options={SIZES} />
+            </Field>
+            <div className="grid gap-1.5">
+              <span id="job-demo-style" className="text-sm font-medium">
+                Light
+              </span>
+              <ToggleGroup
+                aria-label="Light"
+                value={style}
+                onChange={setStyle}
+                items={[
+                  { value: "daylight", label: "Daylight" },
+                  { value: "studio", label: "Studio" },
+                ]}
+                className="w-full"
+              />
+            </div>
+          </>
+        }
+        onGenerate={(prompt) =>
+          job.start(["Reading the product photos", "Composing the scene", "Rendering the picture", "Saving to the catalogue"], {
+            fail,
+            onDone: () => setPhotos((all) => [{ id: `ph${Date.now()}`, prompt, size, style }, ...all]),
+          })
+        }
+        title="Making the photo"
+        doneTitle="Photo saved to the catalogue"
+        failedTitle="The photo was not made"
+        resultsTitle={`Photos · ${photos.length}`}
+        resultsActions={
+          photos.length ? (
+            <Button size="sm" variant="quiet" onClick={() => setPhotos([])}>
+              Clear
+            </Button>
+          ) : null
+        }
+        resultsColumns={3}
+        results={photos.map((p) => (
+          <figure key={p.id} className="grid gap-2">
+            <div className={`grid place-items-center rounded-lg border border-border bg-muted text-muted-foreground ${RATIO_CLASS[p.size]}`}>
+              <Icon name="image" size={28} />
+            </div>
+            <figcaption className="flex items-start justify-between gap-2">
+              <span className="line-clamp-2 text-xs text-muted-foreground">{p.prompt}</span>
+              <Badge>{p.style === "studio" ? "Studio" : "Daylight"}</Badge>
+            </figcaption>
+          </figure>
+        ))}
+        emptyTitle="No photos yet"
+        emptyBody="Describe a photo and press Generate. It lands here and in the catalogue."
+      />
+    </div>
+  );
+}
+
+const TONES = [
+  { value: "warm", label: "Warm and plain" },
+  { value: "bold", label: "Short and bold" },
+  { value: "playful", label: "Playful" },
+];
+const HEADLINES = {
+  warm: ["Made slowly, used every day", "Bowls for the table you actually eat at", "Clay, fire and a little patience"],
+  bold: ["Built to last. Priced to use.", "One bowl. Every meal.", "Stoneware that stays."],
+  playful: ["Soup's new favourite hangout", "Bowl-ed over yet?", "Your cereal deserves better"],
+};
+
+function CopyDemo() {
+  const job = useGeneratorJob();
+  const [tone, setTone] = useState("warm");
+  const [lines, setLines] = useState([]);
+  const [copied, setCopied] = useState(null);
+
+  return (
+    <JobPanel
+      variant="generator"
+      layout="split"
+      job={job}
+      heading="Ad headlines"
+      promptLabel="What are we advertising?"
+      placeholder="The stoneware bowl set, spring sale, 20% off…"
+      promptHint="Three headlines come back each time."
+      options={
+        <Field id="job-demo-tone" label="Tone">
+          <Select id="job-demo-tone" value={tone} onChange={(e) => setTone(e.target.value)} options={TONES} />
+        </Field>
+      }
+      generateLabel="Write headlines"
+      onGenerate={() =>
+        job.start(["Reading the product page", "Writing headlines", "Checking the length"], {
+          onDone: () => setLines((all) => [...HEADLINES[tone].map((text, i) => ({ id: `${Date.now()}-${i}`, text, tone })), ...all]),
+        })
+      }
+      title="Writing headlines"
+      doneTitle="Three headlines written"
+      aside={
+        <Card title="Tips" padding="sm">
+          <ul className="grid gap-1.5 text-sm text-muted-foreground">
+            <li>Name the product and the one reason to buy it.</li>
+            <li>Give the offer and the date it ends.</li>
+            <li>Under 40 characters fits every ad slot.</li>
+          </ul>
+        </Card>
+      }
+      resultsTitle="Headlines"
+      results={lines.map((l) => (
+        <div key={l.id} className="flex min-h-11 items-center justify-between gap-3 rounded-lg border border-border bg-card px-3 py-2">
+          <div className="min-w-0">
+            <p className="text-sm font-medium">{l.text}</p>
+            <p className="text-xs text-muted-foreground">
+              {TONES.find((t) => t.value === l.tone)?.label} · {l.text.length} characters
+            </p>
+          </div>
+          <IconButton
+            icon={copied === l.id ? "check" : "copy"}
+            label={copied === l.id ? "Copied" : "Copy headline"}
+            size="sm"
+            onClick={() => {
+              navigator.clipboard?.writeText(l.text).catch(() => {});
+              setCopied(l.id);
+            }}
+          />
+        </div>
+      ))}
+    />
+  );
+}
+
+const VARIANTS = [
+  { value: "panel", label: "Panel" },
+  { value: "photos", label: "Photos" },
+  { value: "copy", label: "Copy" },
+];
+
+export default function JobPanelDemo() {
+  const [variant, setVariant] = useState("panel");
+  return (
+    <div className="grid gap-4">
+      <ToggleGroup size="sm" aria-label="Variant" value={variant} onChange={setVariant} items={VARIANTS} className="justify-self-start" />
+      {variant === "panel" ? <PanelDemo /> : null}
+      {variant === "photos" ? <PhotosDemo /> : null}
+      {variant === "copy" ? <CopyDemo /> : null}
+    </div>
+  );
+}