@graph8/sdk 0.370.0 → 0.374.0

package/blocks/programmatic-pages/components/programmatic-generate.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+/**
+ * ProgrammaticGenerate: render every page of a campaign (one per source row) and follow the run.
+ *
+ * SDK operations, in order:
+ *   1. getProgrammaticWorkspace (GET /programmatic-campaigns/{id}/workspace)     read   how many source rows there are, and the approval mode
+ *   2. startProgrammaticGeneration (POST /programmatic-campaigns/{id}/generate) write  background run; FREE, no model runs
+ *   3. getProgrammaticGenerationStatus (GET /programmatic-campaigns/{id}/status) read   polled until the run settles
+ * Generating is free. It is also the one write that can reach the live site: when the campaign's approval mode is "Publish
+ * automatically" the API marks every page live as it renders, so that case is confirmed (tier external) with the number of
+ * source rows. The API does not clear earlier pages first, so running again on a campaign that already has pages may add a
+ * second set; the panel says so before the button is pressed. A run already in progress, or an empty source, is refused by
+ * the API and the button is disabled with the reason.
+ */
+
+import { useEffect, useState } from "react";
+import { Play } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyValue } from "@/g8/components/screen/key-value-list";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { invalidate } from "@/g8/lib/g8-cache";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { useProgrammaticWorkspace } from "../hooks/use-programmatic-workspace";
+import { isGenerating } from "../lib/programmatic-types";
+import type { Campaign, GenerationStatus } from "../lib/programmatic-types";
+
+export interface ProgrammaticGenerateProps {
+  campaign: Campaign;
+  /** Called when a run settles (completed, failed or paused). */
+  onSettled?: () => void;
+}
+
+const SETTLED = ["completed", "failed", "paused", "draft"];
+
+export function ProgrammaticGenerate({ campaign, onSettled }: ProgrammaticGenerateProps) {
+  const workspace = useProgrammaticWorkspace(campaign.id);
+  const [asking, setAsking] = useState(false);
+  const base = `/programmatic-campaigns/${encodeURIComponent(campaign.id)}`;
+  const poll = useJobPoll<GenerationStatus>(
+    (signal) => g8Get<GenerationStatus>(`${base}/status`, {}, { signal }).then((r) => r.data),
+    { enabled: false, isTerminal: (s) => SETTLED.includes(String(s.status)), intervalMs: 1500, onDone: () => { void invalidate(["programmatic"]); onSettled?.(); } },
+  );
+  const start = poll.start;
+  useEffect(() => { if (isGenerating(campaign)) start(); }, [campaign.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const run = useG8Mutation(() => g8Post(`${base}/generate`), {
+    onSuccess: () => { setAsking(false); void invalidate(["programmatic"]); start(); },
+    onError: () => setAsking(false),
+  });
+
+  const rows = workspace.data?.data?.total_rows ?? workspace.data?.overview?.total_rows ?? null;
+  const approval = (workspace.data?.campaign?.regeneration?.approval_mode ?? campaign.regeneration?.approval_mode) ?? "";
+  const publishes = approval === "auto_publish";
+  const running = poll.polling || isGenerating(campaign) && !poll.done;
+  const hasPages = (campaign.pages_generated ?? 0) + (campaign.pages_failed ?? 0) > 0;
+  const empty = rows === 0;
+  const live = poll.status;
+  const generated = live?.pages_generated ?? campaign.pages_generated ?? null;
+  const failed = live?.pages_failed ?? campaign.pages_failed ?? null;
+  const total = live?.total_pages ?? campaign.total_pages ?? null;
+  const pct = live?.progress_pct ?? (total ? Math.round(((generated ?? 0) / total) * 100) : null);
+
+  if (workspace.loading && !workspace.data) return <Skeleton className="h-24 w-full" aria-busy="true" />;
+  const disabledReason = running ? "A run is already in progress." : empty ? "The source has no rows, so there is nothing to render." : "";
+  return (
+    <section aria-label="Generate pages" className="grid gap-3 rounded-md border p-3">
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <div>
+          <h3 className="text-sm font-medium">Render the pages</h3>
+          <p className="text-muted-foreground text-xs">One page per source row ({rows == null ? <EmptyValue /> : plural(rows, "row")}), rendered by filling in the template. Free: no model runs.</p>
+        </div>
+        <Button size="sm" loading={run.loading} disabled={Boolean(disabledReason) || run.loading} title={disabledReason || undefined} onClick={() => (publishes ? (run.reset(), setAsking(true)) : void run.mutate(undefined))}>
+          <Play className="size-4" />{hasPages ? "Generate again" : "Generate pages"}
+        </Button>
+      </div>
+      {disabledReason ? <p role="note" className="text-muted-foreground text-xs">{disabledReason}</p> : null}
+      {publishes ? <p role="note" className="text-xs">This campaign publishes automatically: pages are marked live as they render.</p> : <p className="text-muted-foreground text-xs">Pages are created as drafts. Nothing goes live until you publish them.</p>}
+      {hasPages && !running ? <p role="note" className="text-xs">This campaign already has pages. The API does not clear them first, so running again may add a second set of the same pages.</p> : null}
+      {running || live ? (
+        <div className="grid gap-1">
+          <div role="progressbar" aria-label="Generation progress" aria-valuemin={0} aria-valuemax={100} aria-valuenow={pct ?? undefined} className="bg-muted h-2 overflow-hidden rounded-full">
+            <div className="bg-foreground h-full" style={{ width: `${Math.min(100, Math.max(0, pct ?? 0))}%` }} />
+          </div>
+          <p role="status" className="text-muted-foreground text-xs">
+            {generated == null ? <EmptyValue /> : generated.toLocaleString()} of {total == null ? <EmptyValue /> : total.toLocaleString()} rendered
+            {failed ? `, ${failed.toLocaleString()} failed` : ""} <StatusPill tone={live?.status === "failed" ? "negative" : live?.status === "completed" ? "positive" : "info"}>{live?.status ?? campaign.status ?? "generating"}</StatusPill>
+          </p>
+        </div>
+      ) : null}
+      {live?.error_message ? <p role="alert" className="text-error text-xs">{live.error_message}</p> : null}
+      {poll.error ? <ApiError error={poll.error} title="Could not read the progress" onRetry={start} /> : null}
+      {run.error ? <ApiError error={run.error} title="Could not start the run" /> : null}
+      <ConfirmSpendDialog
+        open={asking}
+        tier="external"
+        title={`Render and publish ${rows == null ? "every" : plural(rows ?? 0, "page")}?`}
+        affected={rows ?? undefined}
+        description={<p>This campaign&apos;s approval mode is &quot;Publish automatically&quot;. Each page is marked live as soon as it renders, with its public address. Switch the approval mode to &quot;Draft only&quot; in Settings to review first.</p>}
+        confirmLabel="Render and publish"
+        confirming={run.loading}
+        onCancel={() => setAsking(false)}
+        onConfirm={() => void run.mutate(undefined)}
+      />
+    </section>
+  );
+}

package/blocks/programmatic-pages/components/programmatic-generated-pages.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+/**
+ * ProgrammaticGeneratedPages: the generated pages of one campaign, with row and bulk lifecycle actions.
+ *
+ * SDK operations, in order:
+ *   1. listProgrammaticGeneratedPages (GET /programmatic-campaigns/{id}/pages)                     read      50 per read, offset paged
+ *   2. runProgrammaticPageAction (POST /programmatic-campaigns/{id}/pages/{page_id}/actions)       external  mark ready, unpublish, mark for
+ *      regeneration, replace the HTML (override), undo the replacement. Unpublish takes the page OFF the live site: confirmed.
+ *   3. runProgrammaticBulkPageAction (POST /programmatic-campaigns/{id}/pages/actions)             external  the same on a selection; delete
+ *      removes pages (destructive, confirmed); queue_search_console submits live URLs to Google (confirmed); export_urls only reads.
+ * A confirm counts exactly the pages the request sends: the selection is filtered once to the pages the action applies to (live
+ * pages for unpublish and Search Console, rendered drafts for mark ready) and that array is both counted and sent. The list is
+ * paged by the API without a filter, so search and the status filter work on the pages loaded so far and say so.
+ */
+
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ExternalLink, FileDown, Trash2 } from "lucide-react";
+import { Button, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { LoadMore } from "@/g8/components/paging-notices";
+import { EmptyValue } from "@/g8/components/screen/key-value-list";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { SelectFilter } from "@/g8/components/screen/filter-controls";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useLoadMoreList } from "@/g8/hooks/use-load-more-list";
+import { invalidate } from "@/g8/lib/g8-cache";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { byOffset } from "@/g8/lib/paging";
+import { plural } from "@/g8/lib/plural";
+import { asRec, num, rowsOf, shortDate } from "@/g8/pages/lib/studio";
+import { PAGE_SIZE, PAGE_STATUSES, bulkTargets, isLive, pageActionBlock, wording } from "../lib/programmatic-types";
+import type { BulkActionName, Campaign, GeneratedPage, PageActionName } from "../lib/programmatic-types";
+
+export interface ProgrammaticGeneratedPagesProps {
+  campaign: Campaign;
+}
+
+type Pending = { kind: "page"; page: GeneratedPage; action: "unpublish" } | { kind: "bulk"; action: BulkActionName; ids: string[] };
+const tone = (s?: string | null) => (s === "published" ? "positive" : s === "failed" ? "negative" : s === "generated" ? "info" : "neutral");
+const LABELS: Record<string, string> = { mark_ready_to_deploy: "Mark ready", unpublish: "Unpublish", mark_for_regeneration: "Regenerate", override: "Replace HTML", reset_override: "Undo HTML edit" };
+
+export function ProgrammaticGeneratedPages({ campaign }: ProgrammaticGeneratedPagesProps) {
+  const base = `/programmatic-campaigns/${encodeURIComponent(campaign.id)}`;
+  const total = useRef<number | undefined>(undefined);
+  const list = useLoadMoreList(byOffset<GeneratedPage>(PAGE_SIZE, async (offset, signal) => {
+    const data = asRec((await g8Get(`${base}/pages`, { limit: PAGE_SIZE, offset: offset || undefined }, { signal })).data);
+    const rows = rowsOf<GeneratedPage>(data, "pages");
+    if (offset === 0) total.current = num(data.total); // the first read of a campaign replaces the count; a later page never keeps another campaign's
+    return { rows, hasNext: total.current === undefined ? undefined : offset + rows.length < total.current };
+  }), [campaign.id]);
+  const pages = list.data ?? [];
+  const [search, setSearch] = useState("");
+  const [status, setStatus] = useState("");
+  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [editing, setEditing] = useState<GeneratedPage | null>(null);
+  const [html, setHtml] = useState("");
+  const [busy, setBusy] = useState<string | null>(null);
+  const [note, setNote] = useState("");
+  const [urls, setUrls] = useState<string[] | null>(null);
+
+  // Selection follows the data: ids that are no longer loaded (a refetch, a delete) leave the selection.
+  useEffect(() => { setSelected((cur) => { const alive = new Set(pages.map((p) => p.id)); const next = new Set([...cur].filter((id) => alive.has(id))); return next.size === cur.size ? cur : next; }); }, [list.data]); // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => { setSelected(new Set()); setNote(""); }, [campaign.id]);
+
+  const shown = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    return pages.filter((p) => (!status || p.status === status) && (!q || `${p.slug ?? ""} ${p.published_url ?? ""}`.toLowerCase().includes(q)));
+  }, [pages, search, status]);
+
+  const refresh = (): void => { void invalidate(["programmatic"]); void list.refetch(); };
+  const rowAction = useG8Mutation((v: { page: GeneratedPage; action: PageActionName; html?: string }) => {
+    const body: Record<string, unknown> = { action: v.action };
+    if (v.action === "override") { body.html_output = v.html; body.manual_override = { fields: ["html_output"] }; }
+    return g8Post(`${base}/pages/${encodeURIComponent(v.page.id)}/actions`, body);
+  }, { onSuccess: (_r, v) => { setBusy(null); setPending(null); setEditing(null); setNote(`${LABELS[v.action]} done for ${v.page.slug ?? "the page"}.`); refresh(); }, onError: () => setBusy(null) });
+  const bulk = useG8Mutation((v: { action: BulkActionName; ids: string[] }) => g8Post<{ urls?: string[]; count?: number }>(`${base}/pages/actions`, { action: v.action, page_ids: v.ids }), {
+    onSuccess: (res, v) => {
+      setPending(null);
+      const d = asRec(res.data);
+      if (v.action === "export_urls") setUrls(Array.isArray(d.urls) ? (d.urls as string[]) : []);
+      else { setSelected(new Set()); setNote(`${plural(num(d.count) ?? v.ids.length, "page")} updated.`); refresh(); }
+    },
+  });
+
+  const run = (page: GeneratedPage, action: PageActionName): void => {
+    rowAction.reset();
+    if (action === "unpublish") return setPending({ kind: "page", page, action });
+    if (action === "override") { setHtml(""); return setEditing(page); }
+    setBusy(page.id);
+    void rowAction.mutate({ page, action });
+  };
+  const ask = (action: BulkActionName): void => {
+    const ids = bulkTargets(pages, selected, action);
+    if (ids.length === 0) return;
+    if (action === "unpublish_selected" || action === "delete_selected" || action === "queue_search_console") { bulk.reset(); setPending({ kind: "bulk", action, ids }); }
+    else void bulk.mutate({ action, ids });
+  };
+  const toggle = (id: string): void => setSelected((cur) => { const n = new Set(cur); if (n.has(id)) n.delete(id); else n.add(id); return n; });
+  const allShown = shown.length > 0 && shown.every((p) => selected.has(p.id));
+  const count = (a: BulkActionName): number => bulkTargets(pages, selected, a).length;
+
+  const copy = pending?.kind === "bulk" ? pending : null;
+  const liveInPick = (ids: string[]): number => bulkTargets(pages, new Set(ids), "unpublish_selected").length;
+  const confirmText = pending?.kind === "page"
+    ? { tier: "external" as const, title: `Take ${pending.page.slug ?? "this page"} off the live site?`, body: "Visitors to its address will no longer see it. On a custom domain the last published copy may stay up until the next publish. You can mark it ready and publish it again.", label: "Unpublish", affected: 1 }
+    : copy?.action === "delete_selected"
+      ? { tier: "destructive" as const, title: `Delete ${plural(copy.ids.length, "page")}?`, body: `The pages are removed from this campaign. ${liveInPick(copy.ids) === 0 ? "None of them is live." : `${plural(liveInPick(copy.ids), "of them is", "of them are")} live.`} On a hosted address a deleted live page stops being served right away; on a custom domain its last published copy may stay up until the next publish. Unpublish first if you only want it offline.`, label: "Delete", affected: copy.ids.length }
+      : copy?.action === "queue_search_console"
+        ? { tier: "external" as const, title: `Send ${plural(copy.ids.length, "live page")} to Google Search Console?`, body: "The live addresses are queued for submission to the connected Search Console property.", label: "Send", affected: copy.ids.length }
+        : copy
+          ? { tier: "external" as const, title: `Unpublish ${plural(copy.ids.length, "live page")}?`, body: "Visitors to their addresses will no longer see them (on a custom domain the last published copy may stay up until the next publish). Pages that are not live are left out.", label: "Unpublish", affected: copy.ids.length }
+          : null;
+  const confirming = rowAction.loading || bulk.loading;
+
+  if (list.error && !list.data) return <ApiError error={list.error} title="Could not load the pages" onRetry={() => void list.refetch()} />;
+  if (!list.data) return <div aria-busy="true" className="grid gap-2"><Skeleton className="h-10 w-full" /><Skeleton className="h-10 w-full" /></div>;
+  if (pages.length === 0) return <EmptyState title="No pages yet" description="Render the pages from the Overview tab. One page is made for every row of the source." />;
+  return (
+    <div className="grid gap-3">
+      <Toolbar
+        search={{ value: search, onChange: setSearch, placeholder: "Search loaded pages" }}
+        filters={<SelectFilter label="page status" value={status} onChange={setStatus} any="Any status" options={PAGE_STATUSES.map((s) => ({ value: s, label: wording(s) }))} />}
+      />
+      <p role="status" className="text-muted-foreground text-xs">
+        {shown.length === pages.length ? `${pages.length.toLocaleString()} of ${(total.current ?? pages.length).toLocaleString()} pages loaded` : `${shown.length.toLocaleString()} of ${pages.length.toLocaleString()} loaded pages match`}
+        {list.hasMore ? ". Search and the filter look only at the pages loaded so far." : ""}
+      </p>
+      {selected.size > 0 ? (
+        <div role="group" aria-label="Actions for the selected pages" className="bg-muted flex flex-wrap items-center gap-2 rounded-md p-2 text-sm">
+          <span className="mr-2">{plural(selected.size, "page")} selected</span>
+          <Button size="sm" variant="outline" disabled={count("mark_ready_to_deploy_selected") === 0} loading={bulk.loading} onClick={() => ask("mark_ready_to_deploy_selected")}>Mark {count("mark_ready_to_deploy_selected")} ready</Button>
+          <Button size="sm" variant="outline" disabled={count("mark_for_regeneration_selected") === 0} onClick={() => ask("mark_for_regeneration_selected")}>Regenerate {count("mark_for_regeneration_selected")}</Button>
+          <Button size="sm" variant="outline" disabled={count("unpublish_selected") === 0} onClick={() => ask("unpublish_selected")}>Unpublish {count("unpublish_selected")}</Button>
+          <Button size="sm" variant="outline" disabled={count("queue_search_console") === 0} onClick={() => ask("queue_search_console")}>Send {count("queue_search_console")} to Search Console</Button>
+          <Button size="sm" variant="outline" disabled={count("export_urls") === 0} onClick={() => ask("export_urls")}><FileDown className="size-4" />Export {count("export_urls")} addresses</Button>
+          <Button size="sm" variant="outline" onClick={() => ask("delete_selected")}><Trash2 className="size-4" />Delete {count("delete_selected")}</Button>
+        </div>
+      ) : null}
+      {note ? <p role="status" className="text-xs">{note}</p> : null}
+      {!pending && bulk.error ? <ApiError error={bulk.error} title="Could not run the action" /> : null}
+      {!pending && !editing && rowAction.error ? <ApiError error={rowAction.error} title="Could not run the action" /> : null}
+      <div className="overflow-x-auto rounded-md border">
+        <table className="w-full text-sm">
+          <thead className="text-muted-foreground text-left text-xs">
+            <tr>
+              <th className="w-8 p-2"><input type="checkbox" aria-label="Select all shown pages" checked={allShown} onChange={() => setSelected(allShown ? new Set() : new Set(shown.map((p) => p.id)))} /></th>
+              <th className="p-2">Page</th><th className="p-2">Status</th><th className="p-2">Changes</th><th className="p-2">Search score</th><th className="p-2">Rendered</th><th className="p-2 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {shown.length === 0 ? <tr><td colSpan={7} className="text-muted-foreground p-4 text-center">No loaded page matches.</td></tr> : shown.map((p) => (
+              <tr key={p.id} className="border-t align-top">
+                <td className="p-2"><input type="checkbox" aria-label={`Select ${p.slug ?? "page"}`} checked={selected.has(p.id)} onChange={() => toggle(p.id)} /></td>
+                <td className="p-2">
+                  <span className="block font-medium">{p.slug || <EmptyValue />}</span>
+                  {p.published_url ? <a className="text-muted-foreground inline-flex items-center gap-1 text-xs underline" href={p.published_url} target="_blank" rel="noopener noreferrer">Open live page<ExternalLink className="size-3" /></a> : null}
+                  {p.error_message ? <span className="text-error block text-xs">{p.error_message}</span> : null}
+                </td>
+                <td className="p-2"><StatusPill tone={tone(p.status)}>{p.status ? wording(p.status) : "Unknown"}</StatusPill></td>
+                <td className="p-2">{p.change_state && p.change_state !== "no_changes" ? wording(p.change_state) : <EmptyValue />}</td>
+                <td className="p-2">{p.seo_health?.score == null ? <EmptyValue /> : p.seo_health.score}</td>
+                <td className="p-2">{shortDate(p.last_generated_at) || <EmptyValue />}</td>
+                <td className="p-2"><div className="flex flex-wrap justify-end gap-1">
+                  {(["mark_ready_to_deploy", "unpublish", "mark_for_regeneration", "override", "reset_override"] as PageActionName[]).map((a) => {
+                    const why = pageActionBlock(p, a);
+                    return <Button key={a} size="sm" variant="ghost" aria-label={`${LABELS[a]} ${p.slug ?? "page"}`} title={why || undefined} disabled={Boolean(why) || busy === p.id} loading={busy === p.id && a !== "unpublish" && a !== "override"} onClick={() => run(p, a)}>{LABELS[a]}</Button>;
+                  })}
+                </div></td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <LoadMore shown={pages.length} noun="pages" hasMore={list.hasMore} loading={list.loadingMore} onLoadMore={list.loadMore} />
+      <FormSheet open={editing !== null} onOpenChange={(o) => { if (!o) setEditing(null); }} title={`Replace the HTML of ${editing?.slug ?? "this page"}`} description="Your HTML replaces the rendered page. The API removes scripts, forms, styles and event handlers from it. The page keeps its edit until you undo it or regenerate.">
+        <div className="grid gap-3">
+          <Textarea aria-label="Page HTML" rows={14} value={html} onChange={(e) => setHtml(e.target.value)} placeholder="Paste the complete page HTML" />
+          <p className="text-muted-foreground text-xs">The API does not return a page&apos;s current HTML, so paste the whole replacement. {isLive(editing ?? {} as GeneratedPage) ? "This page is live; the edit reaches visitors after the next publish." : ""}</p>
+          {rowAction.error ? <ApiError error={rowAction.error} title="Could not replace the HTML" /> : null}
+          <div className="flex gap-2">
+            <Button loading={rowAction.loading} disabled={html.trim() === "" || !editing} onClick={() => editing && void rowAction.mutate({ page: editing, action: "override", html })}>Replace HTML</Button>
+            <Button variant="outline" onClick={() => setEditing(null)}>Cancel</Button>
+          </div>
+        </div>
+      </FormSheet>
+      <FormSheet open={urls !== null} onOpenChange={(o) => { if (!o) setUrls(null); }} title="Page addresses" description={`${plural(urls?.length ?? 0, "live address")} for the selected pages.`}>
+        {urls && urls.length === 0 ? <p className="text-muted-foreground text-sm">None of the selected pages has a live address.</p> : <Textarea aria-label="Page addresses" readOnly rows={12} value={(urls ?? []).join("\n")} />}
+      </FormSheet>
+      {confirmText ? (
+        <ConfirmSpendDialog
+          open
+          tier={confirmText.tier}
+          title={confirmText.title}
+          affected={confirmText.affected}
+          description={<><p>{confirmText.body}</p>{pending && (bulk.error || rowAction.error) ? <ApiError error={bulk.error ?? rowAction.error} title="Could not run the action" /> : null}</>}
+          confirmLabel={confirmText.label}
+          confirming={confirming}
+          onCancel={() => setPending(null)}
+          onConfirm={() => (pending?.kind === "page" ? (setBusy(pending.page.id), void rowAction.mutate({ page: pending.page, action: "unpublish" })) : pending && void bulk.mutate({ action: pending.action, ids: pending.ids }))}
+        />
+      ) : null}
+    </div>
+  );
+}

package/blocks/programmatic-pages/components/programmatic-overview.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+/**
+ * ProgrammaticOverview: where a campaign stands: readiness checks, the numbers, the template, search health and what the next
+ * render and publish will do. Hosts the Generate and Publish panels.
+ *
+ * SDK operations, in order:
+ *   1. getProgrammaticWorkspace (GET /programmatic-campaigns/{id}/workspace)   read   readiness, counts, search, links, deployment
+ *   2. getLandingPage (GET /landing-pages/{landing_page_id})                   read   the template page's name, only when the workspace names it
+ * Generating and publishing live in ProgrammaticGenerate and ProgrammaticPublish, which confirm what reaches the live site.
+ * A missing number is shown as a dash, never as 0.
+ */
+
+import { CheckCircle2, Circle, ExternalLink } from "lucide-react";
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { asRec, shortDate, text } from "@/g8/pages/lib/studio";
+import { useProgrammaticWorkspace } from "../hooks/use-programmatic-workspace";
+import type { Campaign } from "../lib/programmatic-types";
+import { wording } from "../lib/programmatic-types";
+import { ProgrammaticGenerate } from "./programmatic-generate";
+import { ProgrammaticPublish } from "./programmatic-publish";
+
+export interface ProgrammaticOverviewProps {
+  campaign: Campaign;
+  /** Where the template page is edited. Default: the pages screen at /pages?id=. */
+  pagesHref?: (templatePageId: string) => string;
+}
+
+const n = (v: number | null | undefined): string | null => (v == null ? null : v.toLocaleString());
+
+export function ProgrammaticOverview({ campaign, pagesHref = (id) => `/pages?id=${encodeURIComponent(id)}` }: ProgrammaticOverviewProps) {
+  const ws = useProgrammaticWorkspace(campaign.id);
+  const templateId = ws.data?.template?.template_page_id ?? campaign.template_page_id ?? "";
+  const template = useG8Query(
+    (signal) => g8Get(`/landing-pages/${encodeURIComponent(templateId)}`, undefined, { signal }).then((r) => asRec(r.data)),
+    [templateId], { enabled: Boolean(templateId), key: ["programmatic", "template", templateId] },
+  );
+  if (ws.error && !ws.data) return <ApiError error={ws.error} title="Could not load the campaign" onRetry={() => void ws.refetch()} />;
+  if (!ws.data) return <Skeleton className="h-40 w-full" aria-busy="true" />;
+  const o = ws.data.overview ?? {};
+  const seo = ws.data.seo;
+  const issues = Object.entries(seo?.issues ?? {}).filter(([, c]) => c > 0);
+  const name = text(template.data?.name);
+  return (
+    <div className="grid gap-4">
+      <ul aria-label="Readiness" className="grid gap-1 text-sm">
+        {(o.readiness ?? []).map((r) => (
+          <li key={r.key} className="flex items-center gap-2">
+            {r.complete ? <CheckCircle2 className="size-4" aria-label="Done" /> : <Circle className="text-muted-foreground size-4" aria-label="Not done" />}
+            <span>{r.label}</span>
+            {!r.complete && r.details?.length ? <span className="text-muted-foreground text-xs">Missing: {r.details.join(", ")}</span> : null}
+          </li>
+        ))}
+      </ul>
+      <KeyValueList columns={2} items={[
+        { label: "Source rows", value: n(o.total_rows) },
+        { label: "Pages rendered", value: n(o.generated_pages) },
+        { label: "Live", value: n(o.live_pages) },
+        { label: "Failed", value: n(o.failed_pages) },
+        { label: "Changed since render", value: n(o.changed_rows) },
+        { label: "Hand-edited", value: n(o.manual_overrides) },
+        { label: "Last render", value: shortDate(o.last_generation) || null },
+        { label: "Last publish", value: shortDate(o.last_publish) || null },
+        { label: "Next automatic render", value: o.next_regeneration || null },
+        { label: "Search score (average)", value: seo?.average_score == null ? null : String(seo.average_score) },
+        { label: "Search issues", value: issues.length ? issues.map(([k, c]) => `${wording(k)}: ${c}`).join(", ") : null, wide: true },
+        { label: "Pages with no links in", value: n(ws.data.links?.orphan_pages?.length) },
+        { label: "Address pattern", value: ws.data.template?.slug_template ?? campaign.slug_template ?? null, mono: true },
+        {
+          label: "Template page",
+          wide: true,
+          value: templateId ? <a className="inline-flex items-center gap-1 underline" href={pagesHref(templateId)}>{name || "Open the template page"}<ExternalLink className="size-3" /></a> : null,
+        },
+      ]} />
+      {campaign.error_message ? <p role="alert" className="text-error text-sm">{campaign.error_message}</p> : null}
+      <ProgrammaticGenerate campaign={campaign} />
+      <ProgrammaticPublish campaign={campaign} />
+    </div>
+  );
+}