@graph8/sdk 0.370.0 → 0.374.0

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

@@ -0,0 +1,221 @@
+"use client";
+
+/**
+ * ProgrammaticPagesScreen: the finished workspace for programmatic pages: one template landing page plus a data source makes one
+ * page per row (a page per account, per city, per integration). No props needed.
+ *
+ * Composes: ScreenLayout (title, stats), Toolbar (search, status and source filters), SplitView + DetailPanel (the selected
+ * campaign, deep link `?id=`, detail tab `?tab=`), FormSheet (new campaign via ProgrammaticCampaignForm), ProgrammaticOverview
+ * (with ProgrammaticGenerate and ProgrammaticPublish), ProgrammaticGeneratedPages, ProgrammaticPreview, ProgrammaticVariables,
+ * ProgrammaticSource, ProgrammaticSettings and the form again in edit mode.
+ *
+ * User flows: see every campaign with its state, source and page counts (search; filter by state and source); create one from a
+ * template page and a list or table; open it to see its readiness and numbers; render all pages (free; confirmed when the approval
+ * mode publishes automatically) and follow the run; read, search and filter the generated pages, replace one page's HTML, mark pages
+ * ready, regenerate them, take them off the live site (confirmed), delete them (confirmed), export their addresses, send live ones to
+ * Search Console (confirmed); publish waiting pages, republish everything or roll the last publish back (each confirmed with its
+ * page count); preview one row; set per-variable fallbacks and limits; switch or import the source (a sitemap); set regeneration,
+ * publishing, search and link settings; edit the name and address pattern; delete a campaign (confirmed). The template page is edited
+ * in the pages screen, linked from the Overview.
+ *
+ * SDK operations: listProgrammaticCampaigns, deleteProgrammaticCampaign (destructive, confirmed); everything else lives in the
+ * composed parts, which confirm every action that changes the live site.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Layers, Plus, Trash2 } 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 { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { SelectFilter } from "@/g8/components/screen/filter-controls";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { shortDate } from "@/g8/pages/lib/studio";
+import { CAMPAIGN_STATUSES, SOURCE_TYPES, campaignRows, sourceOf, wording } from "../lib/programmatic-types";
+import type { Campaign } from "../lib/programmatic-types";
+import { ProgrammaticCampaignForm } from "./programmatic-campaign-form";
+import { ProgrammaticGeneratedPages } from "./programmatic-generated-pages";
+import { ProgrammaticOverview } from "./programmatic-overview";
+import { ProgrammaticPreview } from "./programmatic-preview";
+import { ProgrammaticSettings } from "./programmatic-settings";
+import { ProgrammaticSource } from "./programmatic-source";
+import { ProgrammaticVariables } from "./programmatic-variables";
+
+export interface ProgrammaticPagesScreenProps {
+  /** Where a campaign's template page is edited. Default: /pages?id=<id> (the pages screen). */
+  pagesHref?: (templatePageId: string) => string;
+  renderRowActions?: (campaign: Campaign) => ReactNode;
+  renderDetailActions?: (campaign: Campaign) => ReactNode;
+  extraDetailTabs?: { id: string; label: string; render: (campaign: Campaign) => ReactNode }[];
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+const tone = (s?: string | null) => (s === "completed" ? "positive" : s === "failed" ? "negative" : s === "generating" || s === "validating" ? "info" : "neutral");
+const sourceLabel = (c: Campaign): string => SOURCE_TYPES.find((t) => t.value === sourceOf(c).type)?.label ?? "";
+const sum = (rows: Campaign[], pick: (c: Campaign) => number | null | undefined): number | null => {
+  const known = rows.map(pick).filter((v): v is number => typeof v === "number");
+  return known.length ? known.reduce((a, b) => a + b, 0) : null;
+};
+
+export function ProgrammaticPagesScreen({ pagesHref, renderRowActions, renderDetailActions, extraDetailTabs, toolbarActions, className }: ProgrammaticPagesScreenProps) {
+  const [id, setId] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const [tab, setTab] = useUrlState("tab", "overview");
+  const expandProps = { onExpand: () => setView("full"), onCollapse: view === "full" ? () => setView(null) : undefined };
+  const [search, setSearch] = useState("");
+  const [status, setStatus] = useState("");
+  const [source, setSource] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [toDelete, setToDelete] = useState<Campaign | null>(null);
+
+  const list = useG8Query((signal) => g8Get("/programmatic-campaigns", {}, { signal }).then((r) => campaignRows(r.data)), [], { key: ["programmatic", "list"] });
+  const remove = useG8Mutation((c: Campaign) => g8Delete(`/programmatic-campaigns/${encodeURIComponent(c.id)}`), {
+    onSuccess: (_r, c) => { setToDelete(null); if (c.id === id) { setId(null); setView(null); } },
+    invalidates: [["programmatic"]],
+  });
+
+  const all = list.data ?? [];
+  const q = search.trim().toLowerCase();
+  const shown = all.filter((c) => (!status || c.status === status) && (!source || sourceOf(c).type === source) && (!q || `${c.name} ${c.slug_template ?? ""}`.toLowerCase().includes(q)));
+  const selected = all.find((c) => c.id === id);
+  const closeDetail = (): void => { setId(null); setView(null); setTab(null); };
+  const rendered = sum(all, (c) => c.pages_generated);
+  const failed = sum(all, (c) => c.pages_failed);
+
+  const rows = list.error ? <ApiError error={list.error} title="Could not load programmatic campaigns" onRetry={() => void list.refetch()} /> : list.loading && !list.data ? (
+    <div aria-busy="true" className="grid gap-2"><Skeleton className="h-16 w-full" /><Skeleton className="h-16 w-full" /><Skeleton className="h-16 w-full" /></div>
+  ) : shown.length === 0 ? (
+    <EmptyState icon={<Layers className="size-8" />} title={all.length === 0 ? "No programmatic campaigns yet" : "No campaigns match"} description={all.length === 0 ? "Pick a template landing page and a list or table. One page is made for every row: a page per account, per city, per integration." : "Try another search or filter."} action={all.length === 0 ? <Button onClick={() => setCreating(true)}>Create your first campaign</Button> : undefined} />
+  ) : (
+    <>
+      <p role="status" className="text-muted-foreground mb-2 text-xs">{shown.length === all.length ? `All ${plural(all.length, "campaign")}` : `${shown.length.toLocaleString()} of ${plural(all.length, "campaign")}`}</p>
+      <ul className="grid gap-2">
+        {shown.map((c) => (
+          <li key={c.id} className={`flex flex-wrap items-center justify-between gap-2 rounded-md border p-3 ${c.id === id ? "bg-muted" : ""}`}>
+            <button type="button" className="min-w-0 flex-1 text-left" onClick={() => setId(c.id)}>
+              <span className="block truncate font-medium">{c.name}</span>
+              <span className="text-muted-foreground block truncate text-xs">{sourceLabel(c) || "Source unknown"} · {c.pages_generated == null ? "-" : c.pages_generated.toLocaleString()} of {c.total_pages == null ? "-" : c.total_pages.toLocaleString()} pages · {shortDate(c.last_generated_at) || "not rendered"}</span>
+            </button>
+            <StatusPill tone={tone(c.status)}>{c.status ? wording(c.status) : "Unknown"}</StatusPill>
+            <div className="flex gap-1">
+              <Button size="sm" variant="ghost" aria-label={`Delete ${c.name}`} onClick={() => { remove.reset(); setToDelete(c); }}><Trash2 className="size-4" /></Button>
+              {renderRowActions?.(c)}
+            </div>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+
+  const detail = selected ? (
+    <DetailPanel
+      title={selected.name}
+      subtitle={selected.slug_template ?? undefined}
+      badges={<StatusPill tone={tone(selected.status)}>{selected.status ? wording(selected.status) : "Unknown"}</StatusPill>}
+      actions={renderDetailActions?.(selected)}
+      onClose={closeDetail}
+      {...expandProps}
+      activeTab={tab}
+      onTabChange={(t) => setTab(t === "overview" ? null : t)}
+      tabs={[
+        { id: "overview", label: "Overview", content: <ProgrammaticOverview key={selected.id} campaign={selected} pagesHref={pagesHref} /> },
+        { id: "pages", label: "Pages", content: <ProgrammaticGeneratedPages key={selected.id} campaign={selected} /> },
+        { id: "preview", label: "Preview", content: <ProgrammaticPreview key={selected.id} campaign={selected} /> },
+        { id: "variables", label: "Variables", content: <ProgrammaticVariables key={selected.id} campaign={selected} /> },
+        { id: "source", label: "Source", content: <ProgrammaticSource key={selected.id} campaign={selected} /> },
+        { id: "settings", label: "Settings", content: <ProgrammaticSettings key={selected.id} campaign={selected} /> },
+        { id: "edit", label: "Edit", content: <ProgrammaticCampaignForm key={selected.id} campaign={selected} onSaved={() => void list.refetch()} /> },
+        { id: "details", label: "Details", content: <CampaignDetails campaign={selected} /> },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(selected) })),
+      ]}
+    />
+  ) : null;
+
+  return (
+    <ScreenLayout
+      className={className}
+      title="Programmatic pages"
+      description="One template page and one data source make a page for every row: a page per account, per city, per integration."
+      icon={<Layers className="size-5" />}
+      actions={<Button size="sm" onClick={() => setCreating(true)}><Plus className="size-4" />New campaign</Button>}
+      stats={[
+        { label: "Campaigns", value: list.data ? all.length.toLocaleString() : "..." },
+        { label: "Pages rendered", value: list.data ? (rendered == null ? "-" : rendered.toLocaleString()) : "..." },
+        { label: "Failed pages", value: list.data ? (failed == null ? "-" : failed.toLocaleString()) : "...", tone: failed ? "negative" : undefined },
+        { label: "Rendering now", value: list.data ? all.filter((c) => c.status === "generating").length.toLocaleString() : "...", tone: "positive" },
+      ]}
+    >
+      <SplitView
+        list={(
+          <div className="grid gap-3">
+            <Toolbar
+              search={{ value: search, onChange: setSearch, placeholder: "Search campaigns" }}
+              filters={(<>
+                <SelectFilter label="state" value={status} onChange={setStatus} any="Any state" options={CAMPAIGN_STATUSES.map((s) => ({ value: s, label: wording(s) }))} />
+                <SelectFilter label="source" value={source} onChange={setSource} any="Any source" options={SOURCE_TYPES.map((t) => ({ value: t.value, label: t.label }))} />
+              </>)}
+              actions={toolbarActions}
+            />
+            {rows}
+          </div>
+        )}
+        detail={detail}
+        detailOpen={Boolean(selected)}
+        onCloseDetail={closeDetail}
+        expanded={view === "full"}
+        onExpandedChange={(e) => setView(e ? "full" : null)}
+        detailWidth="xl"
+      />
+      <FormSheet open={creating} onOpenChange={setCreating} title="New programmatic campaign" description="Nothing is rendered or published until you ask.">
+        {creating ? <ProgrammaticCampaignForm onCancel={() => setCreating(false)} onSaved={(created) => { setCreating(false); void list.refetch(); setTab(null); setId(created.id); }} /> : null}
+      </FormSheet>
+      <ConfirmSpendDialog
+        open={toDelete !== null}
+        tier="destructive"
+        title={`Delete ${toDelete?.name ?? "this campaign"} and at least its ${plural(toDelete ? (toDelete.pages_generated ?? 0) + (toDelete.pages_failed ?? 0) : 0, "page")}?`}
+        affected={toDelete ? (toDelete.pages_generated ?? 0) + (toDelete.pages_failed ?? 0) : undefined}
+        description={<><p>The campaign and every page it generated are removed. The count is at least this many: a re-run keeps earlier pages, so more can go. On a hosted address a live page stops being served as soon as it is deleted; on a custom domain its last published copy may stay up until the next publish. Unpublish first if you only want pages offline.</p>{remove.error ? <ApiError error={remove.error} title="Could not delete the campaign" /> : null}</>}
+        confirmLabel="Delete"
+        confirming={remove.loading}
+        onCancel={() => setToDelete(null)}
+        onConfirm={() => { if (toDelete) void remove.mutate(toDelete); }}
+      />
+    </ScreenLayout>
+  );
+}
+
+function CampaignDetails({ campaign }: { campaign: Campaign }) {
+  const src = sourceOf(campaign);
+  return (
+    <KeyValueList
+      columns={2}
+      items={[
+        { label: "Name", value: campaign.name },
+        { label: "State", value: campaign.status ? wording(campaign.status) : null },
+        { label: "Lifecycle", value: campaign.lifecycle_state ? wording(campaign.lifecycle_state) : null },
+        { label: "Changes", value: campaign.change_state && campaign.change_state !== "no_changes" ? wording(campaign.change_state) : null },
+        { label: "Source", value: sourceLabel(campaign) || null },
+        { label: "Source name", value: src.name || null },
+        { label: "Address pattern", value: campaign.slug_template ?? null, mono: true, wide: true },
+        { label: "Pages rendered", value: campaign.pages_generated == null ? null : campaign.pages_generated.toLocaleString() },
+        { label: "Pages failed", value: campaign.pages_failed == null ? null : campaign.pages_failed.toLocaleString() },
+        { label: "Created", value: shortDate(campaign.created_at) || null },
+        { label: "Updated", value: shortDate(campaign.updated_at) || null },
+        { label: "Campaign id", value: campaign.id, mono: true },
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,66 @@
+"use client";
+
+/**
+ * ProgrammaticPreview: see one page rendered for one source row, without saving anything.
+ *
+ * SDK operations, in order:
+ *   1. getProgrammaticWorkspace (GET /programmatic-campaigns/{id}/workspace)    read   the first sample rows of the source
+ *   2. previewProgrammaticPage (POST /programmatic-campaigns/{id}/preview)      write  renders one row; FREE, saves nothing
+ * A row is chosen from the sample rows the workspace returns (only rows with a numeric id can be asked for by id); "First row" sends
+ * no row at all and the API uses the source's first row. The HTML is shown in a sandboxed frame with scripts off.
+ */
+
+import { useState } from "react";
+import { Eye } from "lucide-react";
+import { Button, Label } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyValue, KeyValueList } from "@/g8/components/screen/key-value-list";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Post } from "@/g8/lib/g8-client";
+import { text } from "@/g8/pages/lib/studio";
+import type { Rec } from "@/g8/pages/lib/studio";
+import { useProgrammaticWorkspace } from "../hooks/use-programmatic-workspace";
+import type { Campaign } from "../lib/programmatic-types";
+
+export interface ProgrammaticPreviewProps {
+  campaign: Campaign;
+}
+
+interface Rendered { html?: string; slug?: string; contact_id?: number | null; contact_name?: string }
+const SELECT = "border-input bg-background h-9 rounded-md border px-2 text-sm";
+
+/** A readable name for a source row: a person, company or title field, else its position. */
+export function rowLabel(row: Rec, index: number): string {
+  const person = [text(row.first_name), text(row.last_name)].filter(Boolean).join(" ");
+  return person || text(row.name) || text(row.company) || text(row.company_name) || text(row.title) || text(row.email) || `Row ${index + 1}`;
+}
+
+export function ProgrammaticPreview({ campaign }: ProgrammaticPreviewProps) {
+  const ws = useProgrammaticWorkspace(campaign.id);
+  const [rowId, setRowId] = useState("");
+  const rows = (ws.data?.data?.sample_rows ?? []).map((r, i) => ({ id: typeof r.id === "number" ? r.id : null, label: rowLabel(r, i) })).filter((r): r is { id: number; label: string } => r.id !== null);
+  const render = useG8Mutation((id: string) => g8Post<Rendered>(`/programmatic-campaigns/${encodeURIComponent(campaign.id)}/preview`, id ? { contact_id: Number(id) } : {}));
+  const out = render.data?.data;
+  return (
+    <section aria-label="Preview" className="grid gap-3">
+      <div className="flex flex-wrap items-end gap-2">
+        <div>
+          <Label htmlFor="g8-pp-prev-row" className="mb-1">Source row</Label>
+          <select id="g8-pp-prev-row" className={SELECT} value={rowId} onChange={(e) => setRowId(e.target.value)}>
+            <option value="">First row</option>
+            {rows.map((r) => <option key={r.id} value={r.id}>{r.label}</option>)}
+          </select>
+        </div>
+        <Button size="sm" loading={render.loading} onClick={() => void render.mutate(rowId)}><Eye className="size-4" />Render preview</Button>
+      </div>
+      {ws.error ? <ApiError error={ws.error} title="Could not load the source rows" onRetry={() => void ws.refetch()} /> : null}
+      {render.error ? <ApiError error={render.error} title="Could not render the preview" /> : null}
+      {out ? (
+        <>
+          <KeyValueList columns={2} items={[{ label: "Row", value: out.contact_name || null }, { label: "Page address", value: out.slug || null, mono: true }]} />
+          {out.html ? <iframe title="Page preview" sandbox="" srcDoc={out.html} className="bg-background h-[28rem] w-full rounded-md border" /> : <p className="text-muted-foreground text-sm">The API returned no HTML <EmptyValue /></p>}
+        </>
+      ) : <p className="text-muted-foreground text-sm">Pick a row and render it to see the finished page. Nothing is saved.</p>}
+    </section>
+  );
+}

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

@@ -0,0 +1,102 @@
+"use client";
+
+/**
+ * ProgrammaticPublish: put the campaign's pages on the live site, republish them, or roll the last publish back.
+ *
+ * SDK operations, in order:
+ *   1. getProgrammaticWorkspace (GET /programmatic-campaigns/{id}/workspace)             read      pages waiting, pages live, publish history
+ *   2. runProgrammaticBulkPageAction (POST /programmatic-campaigns/{id}/pages/actions)   external  deploy_pending_changes, republish_all,
+ *      rollback_publish. Each changes what real visitors see, so each is confirmed with the number of pages it touches.
+ * The numbers in the confirm come from the workspace counts: pages waiting (rendered, not live), pages live, and what a
+ * republish covers (every rendered page that did not fail, drafts included). Publishing needs a connected Cloudflare site or the
+ * workspace's hosting; when neither is configured the API says so and the message is shown. Nothing is sent without the confirm.
+ */
+
+import { useState } from "react";
+import { Rocket, RotateCcw } 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, KeyValueList } from "@/g8/components/screen/key-value-list";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { invalidate } from "@/g8/lib/g8-cache";
+import { g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { asRec, num, shortDate, text } from "@/g8/pages/lib/studio";
+import { useProgrammaticWorkspace } from "../hooks/use-programmatic-workspace";
+import type { Campaign, DeployActionName } from "../lib/programmatic-types";
+
+export interface ProgrammaticPublishProps {
+  campaign: Campaign;
+}
+
+export function ProgrammaticPublish({ campaign }: ProgrammaticPublishProps) {
+  const ws = useProgrammaticWorkspace(campaign.id);
+  const [asking, setAsking] = useState<DeployActionName | null>(null);
+  const [done, setDone] = useState("");
+  const run = useG8Mutation((action: DeployActionName) => g8Post(`/programmatic-campaigns/${encodeURIComponent(campaign.id)}/pages/actions`, { action }), {
+    onSuccess: (res, action) => {
+      const d = asRec(res.data);
+      setAsking(null);
+      setDone(`${action === "rollback_publish" ? "Rolled back" : "Published"} ${plural(num(d.count) ?? 0, "page")}.${text(d.deployment_url) ? ` Site: ${text(d.deployment_url)}` : ""}`);
+      void invalidate(["programmatic"]);
+    },
+  });
+  if (ws.error && !ws.data) return <ApiError error={ws.error} title="Could not load the publishing state" onRetry={() => void ws.refetch()} />;
+  if (!ws.data) return <Skeleton className="h-24 w-full" aria-busy="true" />;
+
+  const counts = ws.data.pages?.status_counts ?? {};
+  const waiting = ws.data.deployment?.pending_pages ?? counts.generated ?? null;
+  const live = ws.data.deployment?.published_pages ?? counts.published ?? null;
+  const covered = (counts.generated ?? 0) + (counts.published ?? 0);
+  const changed = ws.data.overview?.changed_rows ?? null;
+  const last = ws.data.deployment?.diagnostics;
+  const history = ws.data.deployment?.history ?? [];
+  const canRollback = Boolean(ws.data.campaign?.deployment_run_id ?? campaign.deployment_run_id);
+  const nothingWaiting = (waiting ?? 0) === 0 && (changed ?? 0) === 0;
+  const copy: Record<DeployActionName, { title: string; body: string; affected: number | undefined; label: string }> = {
+    deploy_pending_changes: { title: `Publish ${waiting == null ? "the waiting pages" : plural(waiting, "waiting page")}?`, body: `Puts the rendered pages that are not live yet on the live site, and refreshes live pages whose data or template changed${changed == null ? "" : ` (${plural(changed, "changed row")})`}.`, affected: waiting ?? undefined, label: "Publish" },
+    republish_all: { title: `Republish ${plural(covered, "page")}?`, body: "Rebuilds the whole site from every rendered page that did not fail. Rendered drafts that are not live yet go live too.", affected: covered, label: "Republish" },
+    rollback_publish: { title: "Roll back the last publish?", body: "Takes the pages from the most recent publish off the live site and returns them to ready. Earlier publishes are not touched.", affected: undefined, label: "Roll back" },
+  };
+  const open = asking ? copy[asking] : null;
+  return (
+    <section aria-label="Publish" className="grid gap-3 rounded-md border p-3">
+      <div>
+        <h3 className="text-sm font-medium">Publish to the live site</h3>
+        <p className="text-muted-foreground text-xs">Rendering pages never publishes them (unless the approval mode says so). These actions do.</p>
+      </div>
+      <KeyValueList columns={2} items={[
+        { label: "Waiting to go live", value: waiting == null ? null : waiting.toLocaleString() },
+        { label: "Live now", value: live == null ? null : live.toLocaleString() },
+        { label: "Last publish", value: shortDate(campaign.last_deployed_at ?? ws.data.overview?.last_publish) || null },
+        { label: "Address pattern", value: ws.data.deployment?.url_pattern_preview ?? null, mono: true },
+      ]} />
+      <div className="flex flex-wrap gap-2">
+        <Button size="sm" disabled={nothingWaiting} title={nothingWaiting ? "No page is waiting to go live and no live page has changed." : undefined} onClick={() => { run.reset(); setAsking("deploy_pending_changes"); }}><Rocket className="size-4" />Publish waiting pages</Button>
+        <Button size="sm" variant="outline" disabled={covered === 0} title={covered === 0 ? "No rendered page to republish." : undefined} onClick={() => { run.reset(); setAsking("republish_all"); }}>Republish everything</Button>
+        <Button size="sm" variant="outline" disabled={!canRollback} title={canRollback ? undefined : "There is no publish to roll back."} onClick={() => { run.reset(); setAsking("rollback_publish"); }}><RotateCcw className="size-4" />Roll back last publish</Button>
+      </div>
+      {done ? <p role="status" className="text-xs">{done}</p> : null}
+      {last?.status ? <p className="text-xs">Last result: <StatusPill tone={last.status === "ok" ? "positive" : last.status === "error" ? "negative" : "neutral"}>{last.status}</StatusPill> {last.message || <EmptyValue />}</p> : null}
+      {history.length > 0 ? (
+        <ul aria-label="Publish history" className="text-muted-foreground grid gap-1 text-xs">
+          {history.slice(0, 5).map((h, i) => <li key={`${h.checked_at ?? i}`}>{shortDate(h.checked_at) || <EmptyValue />}: {h.message || <EmptyValue />}</li>)}
+        </ul>
+      ) : null}
+      {!asking && run.error ? <ApiError error={run.error} title="Could not run the action" /> : null}
+      <ConfirmSpendDialog
+        open={asking !== null}
+        tier="external"
+        title={open?.title ?? "Publish"}
+        affected={open?.affected}
+        description={<><p>{open?.body}</p>{run.error ? <ApiError error={run.error} title="Could not run the action" /> : null}</>}
+        confirmLabel={open?.label ?? "Publish"}
+        confirming={run.loading}
+        onCancel={() => setAsking(null)}
+        onConfirm={() => { if (asking) void run.mutate(asking); }}
+      />
+    </section>
+  );
+}

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

@@ -0,0 +1,96 @@
+"use client";
+
+/**
+ * ProgrammaticSettings: how a campaign regenerates, where its pages are published, and its search and link rules.
+ *
+ * SDK operations, in order:
+ *   1. getProgrammaticCampaign (GET /programmatic-campaigns/{id})                        read    the full settings (the list row may omit them)
+ *   2. updateProgrammaticWorkspace (PATCH /programmatic-campaigns/{id}/workspace)        write   only the keys that changed
+ * Settings are merged by the API per group, so the save sends only the changed keys of the changed groups, and a cleared text is
+ * sent as null. Choosing "Publish automatically" is confirmed here, because it makes every later render go live. Nothing is
+ * published by saving.
+ */
+
+import { useState } from "react";
+import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Patch } from "@/g8/lib/g8-client";
+import { APPROVAL_MODES, REGENERATION_MODES, settingsDraftOf, settingsPatch } from "../lib/programmatic-types";
+import type { Campaign, SettingsDraft } from "../lib/programmatic-types";
+
+export interface ProgrammaticSettingsProps {
+  campaign: Campaign;
+}
+
+const SELECT = "border-input bg-background h-9 w-full rounded-md border px-2 text-sm";
+
+export function ProgrammaticSettings({ campaign }: ProgrammaticSettingsProps) {
+  const full = useG8Query(
+    (signal) => g8Get<Campaign>(`/programmatic-campaigns/${encodeURIComponent(campaign.id)}`, {}, { signal }).then((r) => r.data),
+    [campaign.id], { key: ["programmatic", "detail", campaign.id] },
+  );
+  if (full.error && !full.data) return <ApiError error={full.error} title="Could not load the settings" onRetry={() => void full.refetch()} />;
+  if (!full.data) return <Skeleton className="h-40 w-full" aria-busy="true" />;
+  return <Fields key={campaign.id} campaign={full.data} />;
+}
+
+function Fields({ campaign }: { campaign: Campaign }) {
+  const was = settingsDraftOf(campaign);
+  const [d, setD] = useState<SettingsDraft>(was);
+  const [asking, setAsking] = useState(false);
+  const patch = settingsPatch(was, d);
+  const dirty = Object.keys(patch).length > 0;
+  const thinOk = d.thinWords.trim() === "" || /^\d+$/.test(d.thinWords.trim());
+  const save = useG8Mutation(() => g8Patch(`/programmatic-campaigns/${encodeURIComponent(campaign.id)}/workspace`, { settings: patch }), {
+    onSuccess: () => setAsking(false), onError: () => setAsking(false), invalidates: [["programmatic"]],
+  });
+  const set = (p: Partial<SettingsDraft>): void => setD((cur) => ({ ...cur, ...p }));
+  const turnsOnAuto = d.approval === "auto_publish" && was.approval !== "auto_publish";
+  return (
+    <form className="grid gap-4" onSubmit={(e) => { e.preventDefault(); if (!dirty || !thinOk) return; if (turnsOnAuto) { save.reset(); setAsking(true); } else void save.mutate(undefined); }}>
+      <fieldset className="grid gap-3 sm:grid-cols-2">
+        <legend className="mb-2 text-sm font-medium">Regeneration</legend>
+        <div><Label htmlFor="g8-pp-mode" className="mb-1">Render again</Label>
+          <select id="g8-pp-mode" className={SELECT} value={d.mode} onChange={(e) => set({ mode: e.target.value })}>{was.mode === "" ? <option value="">Not set</option> : null}{REGENERATION_MODES.map((m) => <option key={m.value} value={m.value}>{m.label}</option>)}</select></div>
+        <div><Label htmlFor="g8-pp-approval" className="mb-1">New pages</Label>
+          <select id="g8-pp-approval" className={SELECT} value={d.approval} onChange={(e) => set({ approval: e.target.value })}>{was.approval === "" ? <option value="">Not set</option> : null}{APPROVAL_MODES.map((m) => <option key={m.value} value={m.value}>{m.label}</option>)}</select>
+          <p className="text-muted-foreground mt-1 text-xs">{APPROVAL_MODES.find((m) => m.value === d.approval)?.hint}</p></div>
+        <label className="flex items-center gap-2 text-sm sm:col-span-2"><input type="checkbox" checked={d.changedOnly} onChange={(e) => set({ changedOnly: e.target.checked })} />Only render rows that changed</label>
+      </fieldset>
+      <fieldset className="grid gap-3 sm:grid-cols-2">
+        <legend className="mb-2 text-sm font-medium">Publishing</legend>
+        <div><Label htmlFor="g8-pp-domain" className="mb-1">Domain</Label><Input id="g8-pp-domain" placeholder="pages.example.com" value={d.domain} onChange={(e) => set({ domain: e.target.value })} /></div>
+        <div><Label htmlFor="g8-pp-base" className="mb-1">Folder</Label><Input id="g8-pp-base" placeholder="integrations" value={d.basePath} onChange={(e) => set({ basePath: e.target.value })} /></div>
+      </fieldset>
+      <fieldset className="grid gap-3 sm:grid-cols-2">
+        <legend className="mb-2 text-sm font-medium">Search</legend>
+        <div><Label htmlFor="g8-pp-thin" className="mb-1">Thin page below (words)</Label><Input id="g8-pp-thin" inputMode="numeric" value={d.thinWords} onChange={(e) => set({ thinWords: e.target.value })} aria-invalid={!thinOk} /></div>
+        <div><Label htmlFor="g8-pp-canon" className="mb-1">Canonical address pattern</Label><Input id="g8-pp-canon" value={d.canonical} onChange={(e) => set({ canonical: e.target.value })} /></div>
+        <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={d.schemaRequired} onChange={(e) => set({ schemaRequired: e.target.checked })} />Flag pages with no structured data</label>
+      </fieldset>
+      <fieldset className="grid gap-2">
+        <legend className="mb-2 text-sm font-medium">Links</legend>
+        <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={d.sitemap} onChange={(e) => set({ sitemap: e.target.checked })} />Include pages in a sitemap</label>
+        <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={d.breadcrumbs} onChange={(e) => set({ breadcrumbs: e.target.checked })} />Breadcrumbs</label>
+        <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={d.related} onChange={(e) => set({ related: e.target.checked })} />Related pages</label>
+      </fieldset>
+      {!thinOk ? <p role="alert" className="text-error text-xs">The word count must be a whole number.</p> : null}
+      {!asking && save.error ? <ApiError error={save.error} title="Could not save the settings" /> : null}
+      {save.data && !dirty ? <p role="status" className="text-xs">Settings saved.</p> : null}
+      <div><Button type="submit" loading={save.loading} disabled={!dirty || !thinOk}>Save settings</Button></div>
+      <ConfirmSpendDialog
+        open={asking}
+        tier="external"
+        title="Publish new pages automatically?"
+        description={<p>From now on every render marks its pages live as soon as they are made, with no review step. Existing pages are not changed by this save.</p>}
+        confirmLabel="Publish automatically"
+        confirming={save.loading}
+        onCancel={() => setAsking(false)}
+        onConfirm={() => void save.mutate(undefined)}
+      />
+    </form>
+  );
+}

package/blocks/programmatic-pages/components/programmatic-source-fields.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+/**
+ * ProgrammaticSourceFields: choose where a campaign's rows come from (a contact list, or a Workbench / CSV / sitemap-import table).
+ *
+ * SDK operations: listWorkbenchTables (GET /workbench/tables) read, only while a table source type is chosen.
+ * The list choice is the crm block's ListSelect (GET /lists, paged). No id is typed by hand.
+ */
+
+import { Label } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { hasNextOf } from "@/g8/lib/paging";
+import { ListSelect } from "@/g8/crm/components/list-select";
+import { rowsOf } from "@/g8/pages/lib/studio";
+import { SOURCE_TYPES } from "../lib/programmatic-types";
+import type { SourceType } from "../lib/programmatic-types";
+
+export interface SourceValue { type: SourceType; listId: number | null; tableId: string; tableName: string }
+
+export interface ProgrammaticSourceFieldsProps {
+  value: SourceValue;
+  onChange: (next: SourceValue) => void;
+  disabled?: boolean;
+  /** Name to show for the current list or table before the options have loaded. */
+  currentName?: string;
+  idPrefix?: string;
+}
+
+interface TableRow { id?: string | null; name?: string | null; row_count?: number | null }
+const SELECT = "border-input bg-background h-9 w-full rounded-md border px-2 text-sm disabled:opacity-50";
+const TABLE_READ = 100;
+
+export function ProgrammaticSourceFields({ value, onChange, disabled, currentName, idPrefix = "g8-pp" }: ProgrammaticSourceFieldsProps) {
+  const tables = useG8Query(
+    (signal) => g8Get("/workbench/tables", { limit: TABLE_READ }, { signal }).then((r) => {
+      const rows = rowsOf<TableRow>(r.data, "tables");
+      return { rows, more: hasNextOf(r, TABLE_READ, rows.length) === true };
+    }),
+    [], { enabled: value.type !== "list" },
+  );
+  const rows = (tables.data?.rows ?? []).filter((t): t is TableRow & { id: string } => Boolean(t.id));
+  const known = rows.some((t) => t.id === value.tableId);
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      <div>
+        <Label htmlFor={`${idPrefix}-source-type`} className="mb-1">Data source</Label>
+        <select id={`${idPrefix}-source-type`} className={SELECT} value={value.type} disabled={disabled} onChange={(e) => onChange({ type: e.target.value as SourceType, listId: null, tableId: "", tableName: "" })}>
+          {SOURCE_TYPES.map((t) => <option key={t.value} value={t.value}>{t.label}</option>)}
+        </select>
+        <p className="text-muted-foreground mt-1 text-xs">{SOURCE_TYPES.find((t) => t.value === value.type)?.hint}</p>
+      </div>
+      <div>
+        {value.type === "list" ? (
+          <>
+            <Label htmlFor={`${idPrefix}-list`} className="mb-1">List</Label>
+            <ListSelect id={`${idPrefix}-list`} label="Source list" emptyOption="Choose a list" type="contacts" value={value.listId} valueLabel={currentName || "Current list"} disabled={disabled} onChange={(l) => onChange({ ...value, listId: l ? Number(l.id) : null })} />
+          </>
+        ) : (
+          <>
+            <Label htmlFor={`${idPrefix}-table`} className="mb-1">Table</Label>
+            <select id={`${idPrefix}-table`} className={SELECT} value={value.tableId} disabled={disabled || (tables.loading && !tables.data)} onChange={(e) => onChange({ ...value, tableId: e.target.value, tableName: rows.find((t) => t.id === e.target.value)?.name ?? "" })}>
+              <option value="">{tables.loading && !tables.data ? "Loading tables" : "Choose a table"}</option>
+              {value.tableId && !known ? <option value={value.tableId}>{value.tableName || currentName || "Current table"}</option> : null}
+              {rows.map((t) => <option key={t.id} value={t.id}>{t.name ?? "Untitled table"}{t.row_count == null ? "" : ` (${t.row_count.toLocaleString()} rows)`}</option>)}
+            </select>
+            {tables.error ? <ApiError error={tables.error} title="Could not load tables" onRetry={() => void tables.refetch()} /> : null}
+            {tables.data?.more ? <p role="note" className="text-muted-foreground mt-1 text-xs">Showing the first {TABLE_READ} tables.</p> : null}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}