@graph8/sdk 0.373.0 → 0.374.0

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>
+  );
+}

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

@@ -0,0 +1,106 @@
+"use client";
+
+/**
+ * ProgrammaticSource: the rows the pages are made from: what the source is, its columns and first rows, switching it, and
+ * importing a sitemap as the source.
+ *
+ * SDK operations, in order:
+ *   1. getProgrammaticWorkspace (GET /programmatic-campaigns/{id}/workspace)               read    source, columns, sample rows, row count
+ *   2. updateProgrammaticWorkspace (PATCH /programmatic-campaigns/{id}/workspace)          write   switch to another list or table (works at any status)
+ *   3. importProgrammaticSitemap (POST /programmatic-campaigns/{id}/imports/sitemap)       write   REPLACES the source with a table of the sitemap's URLs
+ * A source change marks the pages as changed; render again to apply it. The sitemap import fetches the sitemap (and, if asked,
+ * each page) from the public web; the maximum is left to the API's default unless a number is typed.
+ */
+
+import { useState } from "react";
+import { Button, Input, Label, Skeleton } 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 { g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { plural } from "@/g8/lib/plural";
+import { text } from "@/g8/pages/lib/studio";
+import { useProgrammaticWorkspace } from "../hooks/use-programmatic-workspace";
+import { SOURCE_TYPES, sourceComplete, sourceOf } from "../lib/programmatic-types";
+import type { Campaign, SourceType } from "../lib/programmatic-types";
+import { ProgrammaticSourceFields } from "./programmatic-source-fields";
+import type { SourceValue } from "./programmatic-source-fields";
+
+export interface ProgrammaticSourceProps {
+  campaign: Campaign;
+}
+
+export function ProgrammaticSource({ campaign }: ProgrammaticSourceProps) {
+  const ws = useProgrammaticWorkspace(campaign.id);
+  if (ws.error && !ws.data) return <ApiError error={ws.error} title="Could not load the source" onRetry={() => void ws.refetch()} />;
+  if (!ws.data) return <Skeleton className="h-32 w-full" aria-busy="true" />;
+  const src = sourceOf({ data_source: ws.data.data?.source, data_source_type: campaign.data_source_type, list_id: campaign.list_id });
+  const cols = (ws.data.data?.columns ?? []).slice(0, 6);
+  const rows = ws.data.data?.sample_rows ?? [];
+  const total = ws.data.data?.total_rows ?? null;
+  return (
+    <div className="grid gap-4">
+      <KeyValueList columns={2} items={[
+        { label: "Source", value: SOURCE_TYPES.find((t) => t.value === src.type)?.label ?? null },
+        { label: "Name", value: src.name || null },
+        { label: "Rows", value: total == null ? null : total.toLocaleString() },
+        { label: "Columns", value: (ws.data.data?.columns ?? []).length ? (ws.data.data?.columns ?? []).join(", ") : null, wide: true },
+      ]} />
+      {rows.length > 0 ? (
+        <div className="overflow-x-auto rounded-md border">
+          <table aria-label="First source rows" className="w-full text-sm">
+            <thead className="text-muted-foreground text-left text-xs"><tr>{cols.map((c) => <th key={c} className="p-2">{c}</th>)}</tr></thead>
+            <tbody>{rows.map((r, i) => <tr key={i} className="border-t">{cols.map((c) => <td key={c} className="max-w-48 truncate p-2">{text(r[c]) || <EmptyValue />}</td>)}</tr>)}</tbody>
+          </table>
+        </div>
+      ) : <p className="text-muted-foreground text-sm">The source has no rows to show.</p>}
+      <SwitchSource campaign={campaign} current={src} />
+      <ImportSitemap campaign={campaign} rows={total} />
+    </div>
+  );
+}
+
+function SwitchSource({ campaign, current }: { campaign: Campaign; current: { type: string; id: string; name: string } }) {
+  const [v, setV] = useState<SourceValue>({ type: (SOURCE_TYPES.find((t) => t.value === current.type)?.value ?? "list") as SourceType, listId: current.type === "list" && current.id ? Number(current.id) : null, tableId: current.type !== "list" ? current.id : "", tableName: current.name });
+  const same = v.type === current.type && (v.type === "list" ? String(v.listId ?? "") === current.id : v.tableId === current.id);
+  const save = useG8Mutation(() => g8Patch(`/programmatic-campaigns/${encodeURIComponent(campaign.id)}/workspace`, v.type === "list" ? { data_source_type: v.type, list_id: v.listId } : { data_source_type: v.type, data_source_id: v.tableId, ...(v.tableName ? { data_source_name: v.tableName } : {}) }), { invalidates: [["programmatic"]] });
+  return (
+    <form className="grid gap-3 rounded-md border p-3" onSubmit={(e) => { e.preventDefault(); if (!same && sourceComplete({ source_type: v.type, list_id: v.listId, table_id: v.tableId })) void save.mutate(undefined); }}>
+      <h3 className="text-sm font-medium">Use a different source</h3>
+      <ProgrammaticSourceFields value={v} onChange={setV} currentName={current.name} idPrefix="g8-pp-switch" />
+      {save.error ? <ApiError error={save.error} title="Could not change the source" /> : null}
+      {save.data ? <p role="status" className="text-xs">Source changed. Render the pages again to apply it.</p> : null}
+      <div><Button type="submit" size="sm" loading={save.loading} disabled={same || !sourceComplete({ source_type: v.type, list_id: v.listId, table_id: v.tableId })}>Change source</Button></div>
+    </form>
+  );
+}
+
+function ImportSitemap({ campaign, rows }: { campaign: Campaign; rows: number | null }) {
+  const [url, setUrl] = useState("");
+  const [name, setName] = useState("");
+  const [max, setMax] = useState("");
+  const [fetchPages, setFetchPages] = useState(false);
+  const maxOk = max.trim() === "" || (/^\d+$/.test(max.trim()) && Number(max) >= 1);
+  const valid = /^https?:\/\/\S+$/i.test(url.trim()) && maxOk;
+  const run = useG8Mutation(() => {
+    const body: Record<string, unknown> = { sitemap_url: url.trim(), fetch_pages: fetchPages };
+    if (name.trim()) body.source_name = name.trim();
+    if (max.trim()) body.max_urls = Number(max);
+    return g8Post<{ rows_imported?: number }>(`/programmatic-campaigns/${encodeURIComponent(campaign.id)}/imports/sitemap`, body);
+  }, { invalidates: [["programmatic"]] });
+  return (
+    <form className="grid gap-3 rounded-md border p-3" onSubmit={(e) => { e.preventDefault(); if (valid) void run.mutate(undefined); }}>
+      <h3 className="text-sm font-medium">Import a sitemap as the source</h3>
+      <p role="note" className="text-xs">This replaces the current source{rows == null ? "" : ` (${plural(rows, "row")})`} with a new table of the sitemap&apos;s addresses. The current table is not deleted; switch back to it above.</p>
+      <div className="grid gap-3 sm:grid-cols-2">
+        <div><Label htmlFor="g8-pp-sitemap" className="mb-1">Sitemap address</Label><Input id="g8-pp-sitemap" type="url" placeholder="https://example.com/sitemap.xml" value={url} onChange={(e) => setUrl(e.target.value)} /></div>
+        <div><Label htmlFor="g8-pp-sitemap-name" className="mb-1">Table name (optional)</Label><Input id="g8-pp-sitemap-name" value={name} onChange={(e) => setName(e.target.value)} /></div>
+        <div><Label htmlFor="g8-pp-sitemap-max" className="mb-1">Most addresses (optional)</Label><Input id="g8-pp-sitemap-max" inputMode="numeric" value={max} onChange={(e) => setMax(e.target.value)} aria-invalid={!maxOk} /></div>
+        <label className="flex items-center gap-2 self-end text-sm"><input type="checkbox" checked={fetchPages} onChange={(e) => setFetchPages(e.target.checked)} />Also read each page</label>
+      </div>
+      {run.error ? <ApiError error={run.error} title="Could not import the sitemap" /> : null}
+      {run.data ? <p role="status" className="text-xs">Imported {run.data.data.rows_imported == null ? "the sitemap" : plural(run.data.data.rows_imported, "address", "addresses")}. It is now the source.</p> : null}
+      <div><Button type="submit" size="sm" variant="outline" loading={run.loading} disabled={!valid}>Replace source with sitemap</Button></div>
+    </form>
+  );
+}

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

@@ -0,0 +1,84 @@
+"use client";
+
+/**
+ * ProgrammaticVariables: the {{variables}} of the template and slug, whether the source has a column for each, and the
+ * per-variable rules the renderer applies (a fallback for empty values, a character limit and how to cut).
+ *
+ * SDK operations, in order:
+ *   1. getProgrammaticCampaignVariables (GET /programmatic-campaigns/{id}/variables)  read   variables, matches, sample columns
+ *   2. updateProgrammaticWorkspace (PATCH /programmatic-campaigns/{id}/workspace)     write  the whole variable_config
+ * The API replaces the whole array, so the save merges the edited variables into the stored entries: every other entry, and every
+ * key the form does not show, is sent back unchanged. A cleared fallback or limit is sent as null. Only variables whose values
+ * changed are written. Saving marks the pages as changed; render again to apply it.
+ */
+
+import { useState } from "react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+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 type { Rec } from "@/g8/pages/lib/studio";
+import { changedEdits, editOf, mergeVariableConfig, validMaxChars } from "../lib/programmatic-types";
+import type { Campaign, VariableEdit, VariableStatus } from "../lib/programmatic-types";
+
+export interface ProgrammaticVariablesProps {
+  campaign: Campaign;
+}
+
+interface VariablesPayload { variables?: VariableStatus[]; sample_fields?: string[]; slug_template?: string }
+
+export function ProgrammaticVariables({ campaign }: ProgrammaticVariablesProps) {
+  const q = useG8Query(
+    (signal) => g8Get<VariablesPayload>(`/programmatic-campaigns/${encodeURIComponent(campaign.id)}/variables`, {}, { signal }).then((r) => r.data),
+    [campaign.id], { key: ["programmatic", "variables", campaign.id] },
+  );
+  const stored = useG8Query(
+    (signal) => g8Get<Campaign>(`/programmatic-campaigns/${encodeURIComponent(campaign.id)}`, {}, { signal }).then((r) => r.data),
+    [campaign.id], { key: ["programmatic", "detail", campaign.id] },
+  );
+  if (q.error && !q.data) return <ApiError error={q.error} title="Could not load the variables" onRetry={() => void q.refetch()} />;
+  if (stored.error && !stored.data) return <ApiError error={stored.error} title="Could not load the campaign" onRetry={() => void stored.refetch()} />;
+  if (!q.data || !stored.data) return <Skeleton className="h-32 w-full" aria-busy="true" />;
+  return <Rules key={campaign.id} campaignId={campaign.id} vars={q.data.variables ?? []} columns={q.data.sample_fields ?? []} existing={stored.data.variable_config ?? []} />;
+}
+
+function Rules({ campaignId, vars, columns, existing }: { campaignId: string; vars: VariableStatus[]; columns: string[]; existing: Rec[] }) {
+  const [edits, setEdits] = useState<Record<string, VariableEdit>>(() => Object.fromEntries(vars.map((v) => [v.name, editOf(v)])));
+  const changed = changedEdits(vars, edits);
+  const valid = changed.every((e) => validMaxChars(e.maxChars));
+  const set = (name: string, patch: Partial<VariableEdit>): void => setEdits((cur) => ({ ...cur, [name]: { ...cur[name], ...patch } }));
+  const save = useG8Mutation(() => g8Patch(`/programmatic-campaigns/${encodeURIComponent(campaignId)}/workspace`, { variable_config: mergeVariableConfig(existing, changed) }), {
+    invalidates: [["programmatic"]],
+  });
+  if (vars.length === 0) return <p className="text-muted-foreground text-sm">The template and the address pattern use no {"{{variables}}"}, so every page is the same.</p>;
+  return (
+    <form className="grid gap-3" onSubmit={(e) => { e.preventDefault(); if (valid && changed.length) void save.mutate(undefined); }}>
+      <p className="text-muted-foreground text-xs">Source columns: {columns.length ? columns.join(", ") : "none found"}. A variable with no matching column renders empty unless it has a fallback.</p>
+      <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="p-2">Variable</th><th className="p-2">Source column</th><th className="p-2">Fallback</th><th className="p-2">Character limit</th><th className="p-2">When too long</th></tr></thead>
+          <tbody>
+            {vars.map((v) => {
+              const e = edits[v.name] ?? editOf(v);
+              return (
+                <tr key={v.name} className="border-t">
+                  <td className="p-2 font-mono text-xs">{`{{${v.name}}}`}{v.in_slug ? <span className="text-muted-foreground"> (address)</span> : null}</td>
+                  <td className="p-2"><StatusPill tone={v.matched_in_source ? "positive" : "warning"}>{v.matched_in_source ? "Found" : "No column"}</StatusPill></td>
+                  <td className="p-2"><Input aria-label={`Fallback for ${v.name}`} value={e.fallback} onChange={(ev) => set(v.name, { fallback: ev.target.value })} /></td>
+                  <td className="p-2"><Input aria-label={`Character limit for ${v.name}`} inputMode="numeric" className="w-24" value={e.maxChars} onChange={(ev) => set(v.name, { maxChars: ev.target.value })} aria-invalid={!validMaxChars(e.maxChars)} /></td>
+                  <td className="p-2"><select aria-label={`Cut ${v.name} with`} className="border-input bg-background h-9 rounded-md border px-2 text-sm" value={e.policy} onChange={(ev) => set(v.name, { policy: ev.target.value as "ellipsis" | "clip" })}><option value="ellipsis">Add ...</option><option value="clip">Cut off</option></select></td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+      {!valid ? <p role="alert" className="text-error text-xs">A character limit is a whole number from 1 to 5000.</p> : null}
+      {save.error ? <ApiError error={save.error} title="Could not save the variables" /> : null}
+      {save.data ? <p role="status" className="text-xs">Saved. Render the pages again to apply the new rules.</p> : null}
+      <div><Button type="submit" loading={save.loading} disabled={!valid || changed.length === 0}>Save variable rules</Button></div>
+    </form>
+  );
+}

package/blocks/programmatic-pages/hooks/use-programmatic-workspace.ts

@@ -0,0 +1,19 @@
+"use client";
+
+/**
+ * useProgrammaticWorkspace: the workspace of one campaign (source, readiness, numbers, links, deployment), shared by every tab
+ * through one cache entry so a save on one tab refreshes the others.
+ *
+ * SDK operations: getProgrammaticWorkspace (GET /programmatic-campaigns/{id}/workspace)   read
+ */
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import type { Workspace } from "../lib/programmatic-types";
+
+export function useProgrammaticWorkspace(campaignId: string) {
+  return useG8Query(
+    (signal) => g8Get<Workspace>(`/programmatic-campaigns/${encodeURIComponent(campaignId)}/workspace`, {}, { signal }).then((r) => r.data),
+    [campaignId],
+    { key: ["programmatic", "workspace", campaignId] },
+  );
+}