@graph8/sdk 0.370.0 → 0.374.0

package/blocks/mailboxes/components/warmup-health.tsx

@@ -81,29 +81,29 @@ function Fleet() {
           {safe === false ? "Not safe to send right now" : safe === true ? "Safe to send" : "Send status unknown"}
         </p>
         {verdict.error ? (
-          <p className="text-sm text-amber-900">
+          <p className="text-sm text-warning-foreground">
             The deliverability check failed, so sending is not confirmed safe. Retry before you send.
           </p>
         ) : null}
-        {typeof v.reason === "string" ? <p className="text-sm text-gray-700">{v.reason}</p> : null}
+        {typeof v.reason === "string" ? <p className="text-sm text-foreground">{v.reason}</p> : null}
       </div>
       <dl className="grid grid-cols-2 gap-2 sm:grid-cols-4">
         {scalars(objectOf(summary.data))
           .filter(([k]) => k !== "safe to send")
           .map(([k, val]) => (
-            <div key={k} className="rounded border border-gray-200 p-2">
-              <dt className="text-xs capitalize text-gray-500">{k}</dt>
-              <dd className="text-lg font-semibold">{val}</dd>
+            <div key={k} className="rounded border border-border p-2">
+              <dt className="text-xs capitalize text-muted-foreground">{k}</dt>
+              <dd className="text-lg font-medium">{val}</dd>
             </div>
           ))}
       </dl>
       {rows.length > 0 ? (
-        <ul className="divide-y rounded border border-gray-200" aria-label="Degraded mailboxes">
+        <ul className="divide-y rounded border border-border" aria-label="Degraded mailboxes">
           {rows.map((r, i) => (
             <li key={String(r.id ?? i)} className="flex items-center justify-between px-3 py-2 text-sm">
               <span>
                 {r.email ?? r.mailbox_email ?? `Mailbox ${r.id}`}
-                <span className="ml-2 text-xs text-gray-500">{r.reason ?? r.reasons?.join(", ")}</span>
+                <span className="ml-2 text-xs text-muted-foreground">{r.reason ?? r.reasons?.join(", ")}</span>
               </span>
               <span className={`rounded px-2 py-0.5 text-xs ${statusClass(r.severity ?? r.status)}`}>
                 {r.severity ?? r.status ?? "watch"}
@@ -134,7 +134,7 @@ function MailboxWarmup({ mailboxId }: { mailboxId: string | number }) {
   const w = warm.data?.data;
   const a = w?.analytics;
   return (
-    <section className="space-y-3 rounded border border-gray-200 p-3" aria-label="Warmup">
+    <section className="space-y-3 rounded border border-border p-3" aria-label="Warmup">
       <div className="flex items-center justify-between">
         <h3 className="font-medium">
           Warmup {w?.warmup_enabled ? "is on" : "is off"}
@@ -155,7 +155,7 @@ function MailboxWarmup({ mailboxId }: { mailboxId: string | number }) {
         </div>
       </div>
       {w?.error ? (
-        <p role="alert" className="text-sm text-amber-800">
+        <p role="alert" className="text-sm text-warning-foreground">
           The warmup provider did not answer: {w.error}
         </p>
       ) : null}
@@ -163,22 +163,22 @@ function MailboxWarmup({ mailboxId }: { mailboxId: string | number }) {
         <>
           <dl className="grid grid-cols-2 gap-2 sm:grid-cols-4 text-sm">
             <div>
-              <dt className="text-xs text-gray-500">Sent</dt>
-              <dd className="font-semibold">{a.total_sent ?? 0}</dd>
+              <dt className="text-xs text-muted-foreground">Sent</dt>
+              <dd className="font-medium">{a.total_sent ?? 0}</dd>
             </div>
             <div>
-              <dt className="text-xs text-gray-500">Inbox rate</dt>
-              <dd className="font-semibold">
+              <dt className="text-xs text-muted-foreground">Inbox rate</dt>
+              <dd className="font-medium">
                 {a.inbox_rate != null ? `${Math.round(a.inbox_rate <= 1 ? a.inbox_rate * 100 : a.inbox_rate)}%` : "-"}
               </dd>
             </div>
             <div>
-              <dt className="text-xs text-gray-500">Spam</dt>
-              <dd className="font-semibold">{a.total_spam ?? 0}</dd>
+              <dt className="text-xs text-muted-foreground">Spam</dt>
+              <dd className="font-medium">{a.total_spam ?? 0}</dd>
             </div>
             <div>
-              <dt className="text-xs text-gray-500">Reputation</dt>
-              <dd className="font-semibold">{a.reputation ?? "-"}</dd>
+              <dt className="text-xs text-muted-foreground">Reputation</dt>
+              <dd className="font-medium">{a.reputation ?? "-"}</dd>
             </div>
           </dl>
           {(a.daily_stats ?? []).length > 0 ? (
@@ -187,7 +187,7 @@ function MailboxWarmup({ mailboxId }: { mailboxId: string | number }) {
                 <span
                   key={d.date}
                   title={`${d.date}: ${d.sent} sent, ${d.inbox} inbox`}
-                  className="w-2 rounded-t bg-blue-500"
+                  className="w-2 rounded-t bg-foreground/70"
                   style={{ height: `${Math.max(4, Math.min(100, d.sent * 4))}%` }}
                 />
               ))}
@@ -195,7 +195,7 @@ function MailboxWarmup({ mailboxId }: { mailboxId: string | number }) {
           ) : null}
         </>
       ) : (
-        <p className="text-sm text-gray-500">No warmup analytics yet.</p>
+        <p className="text-sm text-muted-foreground">No warmup analytics yet.</p>
       )}
       <Button size="sm" variant="outline" onClick={() => setConfirm(true)}>
         Run placement test
@@ -203,7 +203,7 @@ function MailboxWarmup({ mailboxId }: { mailboxId: string | number }) {
       {toggle.error ? <ApiError error={toggle.error} onRetry={toggle.reset} /> : null}
       {placement.error ? <ApiError error={placement.error} onRetry={placement.reset} /> : null}
       {note ? (
-        <p role="status" className="text-sm text-green-700">
+        <p role="status" className="text-sm text-positive-foreground">
           {note}
         </p>
       ) : null}

package/blocks/mailboxes/lib/mailboxes-utils.ts

@@ -53,10 +53,10 @@ export function objectOf(envelope: unknown): Record<string, unknown> {
 /** Tailwind classes for a connection or health state. */
 export function statusClass(status: string | null | undefined): string {
   const s = (status ?? "").toLowerCase();
-  if (["active", "connected", "healthy", "completed", "receiving"].includes(s)) return "bg-green-100 text-green-800";
-  if (["paused", "watch", "warming", "pending", "connecting", "provisioning"].includes(s)) return "bg-amber-100 text-amber-800";
-  if (s) return "bg-red-100 text-red-800";
-  return "bg-gray-100 text-gray-700";
+  if (["active", "connected", "healthy", "completed", "receiving"].includes(s)) return "bg-positive text-positive-foreground";
+  if (["paused", "watch", "warming", "pending", "connecting", "provisioning"].includes(s)) return "bg-warning text-warning-foreground";
+  if (s) return "bg-error text-error-foreground";
+  return "bg-muted text-foreground";
 }
 
 /** Scalar fields of an open-shaped object, for a summary grid. */

package/blocks/mailboxes/lib/use-provider-domains.ts

@@ -0,0 +1,23 @@
+"use client";
+
+/**
+ * useProviderDomains: every sending domain of the workspace. The domains API pages (`page`, `limit`), so this reads page
+ * after page (100 per page, up to 20 pages) instead of one capped call; `truncated` says the page cap was reached.
+ *
+ * SDK operations: GET /provider-domains?page&limit   (providerDomains.listProviderDomains)   read
+ */
+import { g8Get } from "@/g8/lib/g8-client";
+import { useAllPages } from "@/g8/hooks/use-all-pages";
+import { hasNextOf } from "@/g8/lib/paging";
+import { listOf } from "./mailboxes-utils";
+import type { DomainRow } from "./mailboxes-utils";
+
+export const DOMAIN_PAGE = 100;
+
+export function useProviderDomains(deps: readonly unknown[] = [], enabled = true) {
+  return useAllPages<DomainRow>(async (page, signal) => {
+    const env = await g8Get("/provider-domains", { page, limit: DOMAIN_PAGE }, { signal });
+    const rows = listOf<DomainRow>(env);
+    return { rows, hasNext: hasNextOf(env, DOMAIN_PAGE, rows.length) };
+  }, deps, { enabled });
+}

package/blocks/newsletter/README.md

@@ -133,3 +133,15 @@ Tiers: `read` and `write` need no confirmation; `billable`, `external` and `dest
 | `newsletter.unsubscribeSubscriber` | `PATCH /api/v1/newsletters/{newsletter_id}/subscribers/{subscriber_id}/unsubscribe` | external | `newsletter:run` | SubscriberTable |
 | `newsletter.deleteSubscriber` | `DELETE /api/v1/newsletters/{newsletter_id}/subscribers/{subscriber_id}` | destructive | `newsletter:delete` | SubscriberTable |
 | `newsletter.getIssueAnalyticsKpis` | `GET /api/v1/newsletters/{newsletter_id}/issues/{issue_id}/analytics/kpis` | read | `newsletter:read` | NewsletterStats |
+
+## Depth added (C7c)
+
+New tabs on `NewsletterScreen`: **Templates**, **Lists**, **Settings**; issues gain a **History** tab; a subscriber shows **Activity on an issue**.
+
+- `NewsletterSettings`: rename and goal, sender and opt-in policy (only changed fields are sent), sending domain (start verification is an external confirm, DNS records are listed, status check), resume a paused newsletter (external confirm), mark completed.
+- `NewsletterListSyncs`: turn a list sync on (the consent statement is shown and sent), run it now, stop it (destructive). Lists page with Load more.
+- `NewsletterTemplates`: use a template for a draft issue, approve or archive, rename, delete (destructive), write one with AI (billable confirm).
+- `IssueVersions`: version history with restore (drafts only, second click) and Duplicate (external confirm).
+- `SubscriberTimeline`: delivered, opened and clicked for one subscriber on one sent issue.
+
+Not covered (and why): `rewriteIssueText`, `setIssueText`, `setIssueMediaEdit`, `setIssueButtonAction` and the template equivalents need element ids the HTML editor does not expose; `linkNewsletterCampaign` needs a campaign picker (owned by the pickers PR); `cloneTemplate`, `createTemplateFromLayout` and `batchTemplateGenerationStatus` are template-gallery flows; `getNewsletterSubscriberVerification` status is not shown (verify still runs and reports through the existing flow); `getNewsletterIssueConversation` is the hosted editor's chat. The subscriber and list pickers keep their existing paging.

package/blocks/newsletter/block.json

@@ -18,28 +18,51 @@
     "activate_newsletter_newsletters__newsletter_id__activate_post",
     "add_subscriber_newsletters__newsletter_id__subscribers_post",
     "cancel_send_newsletters__newsletter_id__issues__issue_id__send_cancel_post",
+    "complete_newsletter_newsletters__newsletter_id__complete_post",
     "create_issue_newsletters__newsletter_id__issues_post",
     "create_newsletter_newsletters_post",
+    "create_template_from_prompt_newsletters_templates_custom_post",
     "delete_issue_newsletters__newsletter_id__issues__issue_id__delete",
+    "delete_newsletter_template_newsletters_templates__template_id__delete",
     "delete_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__delete",
+    "disable_newsletter_list_sync_newsletters__newsletter_id__list_syncs__audience_list_id__delete",
+    "duplicate_issue_newsletters__newsletter_id__issues__issue_id__duplicate_post",
+    "enable_newsletter_list_sync_newsletters__newsletter_id__list_syncs_post",
     "generate_newsletter_issue_newsletters__newsletter_id__issues__issue_id__generate_post",
     "get_issue_analytics_kpis_newsletters__newsletter_id__issues__issue_id__analytics_kpis_get",
     "get_issue_generation_status_newsletters__newsletter_id__issues__issue_id__generation_status_get",
     "get_issue_newsletters__newsletter_id__issues__issue_id__get",
+    "get_newsletter_newsletters__newsletter_id__get",
+    "get_newsletter_settings_newsletters__newsletter_id__settings_get",
     "get_send_status_newsletters__newsletter_id__issues__issue_id__send_get",
+    "get_subscriber_timeline_newsletters__newsletter_id__issues__issue_id__analytics_subscribers__subscriber_id__timeline_get",
     "import_subscribers_from_audience_newsletters__newsletter_id__subscribers_import_audience_post",
     "list_issues_newsletters__newsletter_id__issues_get",
     "list_lists_lists_get",
+    "list_newsletter_issue_versions_newsletters__newsletter_id__issues__issue_id__versions_get",
+    "list_newsletter_list_syncs_newsletters__newsletter_id__list_syncs_get",
     "list_newsletters_newsletters_get",
     "list_subscribers_newsletters__newsletter_id__subscribers_get",
+    "list_templates_newsletters_templates_get",
+    "newsletter_domain_status_newsletters__newsletter_id__settings_domain_status_get",
     "pause_newsletter_newsletters__newsletter_id__pause_post",
     "pause_send_newsletters__newsletter_id__issues__issue_id__send_pause_post",
     "preview_newsletter_subscriber_verification_newsletters__newsletter_id__subscribers_verify_preview_post",
+    "restore_newsletter_issue_version_newsletters__newsletter_id__issues__issue_id__versions__version_num__restore_post",
+    "resume_newsletter_newsletters__newsletter_id__resume_post",
     "resume_send_newsletters__newsletter_id__issues__issue_id__send_resume_post",
+    "run_newsletter_list_sync_newsletters__newsletter_id__list_syncs__audience_list_id__run_post",
     "send_issue_newsletters__newsletter_id__issues__issue_id__send_post",
     "send_test_email_newsletters__newsletter_id__issues__issue_id__send_test_post",
+    "set_template_approval_newsletters_templates__template_id__approval_post",
+    "template_generation_status_newsletters_templates__template_id__generation_status_get",
     "unsubscribe_subscriber_newsletters__newsletter_id__subscribers__subscriber_id__unsubscribe_patch",
     "update_issue_newsletters__newsletter_id__issues__issue_id__put",
+    "update_newsletter_newsletters__newsletter_id__patch",
+    "update_newsletter_settings_newsletters__newsletter_id__settings_put",
+    "update_newsletter_template_newsletters_templates__template_id__patch",
+    "use_template_newsletters_templates__template_id__use_post",
+    "verify_newsletter_domain_newsletters__newsletter_id__settings_verify_domain_post",
     "verify_newsletter_subscribers_newsletters__newsletter_id__subscribers_verify_post"
   ],
   "components": [
@@ -155,6 +178,96 @@
       "tiers": [
         "read"
       ]
+    },
+    {
+      "name": "IssueVersions",
+      "file": "components/issue-versions.tsx",
+      "purpose": "Version history of one issue with restore, and duplicate into a new draft.",
+      "operations": [
+        "list_newsletter_issue_versions_newsletters__newsletter_id__issues__issue_id__versions_get",
+        "restore_newsletter_issue_version_newsletters__newsletter_id__issues__issue_id__versions__version_num__restore_post",
+        "duplicate_issue_newsletters__newsletter_id__issues__issue_id__duplicate_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external"
+      ]
+    },
+    {
+      "name": "MoreRows",
+      "file": "components/more-rows.tsx",
+      "purpose": "Footer for paged lists: how many rows are shown and a Load more button.",
+      "operations": [],
+      "tiers": []
+    },
+    {
+      "name": "NewsletterListSyncs",
+      "file": "components/newsletter-list-syncs.tsx",
+      "purpose": "Keep subscribers in step with lists: turn a sync on (consent confirmed), run it, turn it off.",
+      "operations": [
+        "list_newsletter_list_syncs_newsletters__newsletter_id__list_syncs_get",
+        "list_lists_lists_get",
+        "enable_newsletter_list_sync_newsletters__newsletter_id__list_syncs_post",
+        "run_newsletter_list_sync_newsletters__newsletter_id__list_syncs__audience_list_id__run_post",
+        "disable_newsletter_list_sync_newsletters__newsletter_id__list_syncs__audience_list_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    },
+    {
+      "name": "NewsletterSettings",
+      "file": "components/newsletter-settings.tsx",
+      "purpose": "The newsletter itself: name and goal, sender and opt-in, sending domain verification, resume and complete.",
+      "operations": [
+        "update_newsletter_newsletters__newsletter_id__patch",
+        "update_newsletter_settings_newsletters__newsletter_id__settings_put",
+        "newsletter_domain_status_newsletters__newsletter_id__settings_domain_status_get",
+        "verify_newsletter_domain_newsletters__newsletter_id__settings_verify_domain_post",
+        "complete_newsletter_newsletters__newsletter_id__complete_post",
+        "resume_newsletter_newsletters__newsletter_id__resume_post",
+        "get_newsletter_settings_newsletters__newsletter_id__settings_get",
+        "get_newsletter_newsletters__newsletter_id__get"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external"
+      ]
+    },
+    {
+      "name": "NewsletterTemplates",
+      "file": "components/newsletter-templates.tsx",
+      "purpose": "Saved issue templates: start a draft from one, approve, rename, delete, or write one with AI.",
+      "operations": [
+        "update_newsletter_template_newsletters_templates__template_id__patch",
+        "set_template_approval_newsletters_templates__template_id__approval_post",
+        "use_template_newsletters_templates__template_id__use_post",
+        "template_generation_status_newsletters_templates__template_id__generation_status_get",
+        "delete_newsletter_template_newsletters_templates__template_id__delete",
+        "list_templates_newsletters_templates_get",
+        "create_template_from_prompt_newsletters_templates_custom_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "billable",
+        "destructive"
+      ]
+    },
+    {
+      "name": "SubscriberTimeline",
+      "file": "components/subscriber-timeline.tsx",
+      "purpose": "What one subscriber did with one sent issue.",
+      "operations": [
+        "get_subscriber_timeline_newsletters__newsletter_id__issues__issue_id__analytics_subscribers__subscriber_id__timeline_get"
+      ],
+      "tiers": [
+        "read"
+      ]
     }
   ],
   "hooks": [],
@@ -162,6 +275,10 @@
     {
       "file": "lib/newsletter-types.ts",
       "purpose": "Newsletter/issue/subscriber types and helpers: draft check, percentages, scheduled-time conversion, generation-in-progress guard."
+    },
+    {
+      "file": "lib/newsletter-extra.ts",
+      "purpose": "Helpers for the newsletter management components: open-dict readers, changed-fields diff, domain and DNS helpers."
     }
   ],
   "recipes": [

package/blocks/newsletter/components/issue-scheduler.tsx

@@ -109,7 +109,7 @@ export function IssueScheduler({ newsletterId, issueId, onSent }: IssueScheduler
     <Card>
       <CardHeader><CardTitle>{issueTitle(issue.data)} <span className="text-muted-foreground text-sm font-normal">{issue.data.status}</span></CardTitle></CardHeader>
       <CardContent className="grid gap-4">
-        {partial ? <p role="alert" className="text-sm text-amber-700">This issue is still being written by AI. Wait for it to finish: sending now would mail the partial version.</p> : null}
+        {partial ? <p role="alert" className="text-sm text-warning-foreground">This issue is still being written by AI. Wait for it to finish: sending now would mail the partial version.</p> : null}
         {draft ? (
           <div className="grid gap-3">
             <p className="text-sm">Audience: <strong>{audience.loading ? "..." : subscribers.toLocaleString()}</strong> subscribed {pluralWord(subscribers, "person", "people")}.</p>
@@ -118,7 +118,7 @@ export function IssueScheduler({ newsletterId, issueId, onSent }: IssueScheduler
               <Button size="sm" variant={when === "later" ? "secondary" : "ghost"} onClick={() => setWhen("later")}>Schedule</Button>
             </div>
             {when === "later" ? <div className="max-w-xs"><Label htmlFor="g8-send-at" className="mb-1">Send at</Label><Input id="g8-send-at" type="datetime-local" value={at} onChange={(e) => setAt(e.target.value)} /></div> : null}
-            {inPast ? <p role="alert" className="text-sm text-red-700">Pick a time in the future.</p> : null}
+            {inPast ? <p role="alert" className="text-sm text-error-foreground">Pick a time in the future.</p> : null}
             <div><Button disabled={blocked} onClick={() => void openSend()}>{when === "later" ? "Schedule issue" : "Send issue"}</Button></div>
             {subscribers === 0 && !audience.loading ? <p className="text-muted-foreground text-sm">Add subscribers first (SubscriberTable).</p> : null}
           </div>

package/blocks/newsletter/components/issue-versions.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+/**
+ * IssueVersions: the saved versions of one issue, newest first, with restore, and a Duplicate action that copies the
+ * issue into a new draft.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. listNewsletterIssueVersions     GET  /newsletters/{id}/issues/{issue}/versions                    (read)
+ *   2. restoreNewsletterIssueVersion   POST /newsletters/{id}/issues/{issue}/versions/{n}/restore         (write; replaces the draft's content)
+ *   3. duplicateIssue                  POST /newsletters/{id}/issues/{issue}/duplicate                    (EXTERNAL, confirmed; creates a draft, sends nothing)
+ *
+ * Only a draft can be restored (a sent issue is a record of what people received). Restoring replaces the draft's
+ * current content, so the button says so and asks for a second click before it writes.
+ */
+import { useState } from "react";
+import { Copy } 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 { useConfirmAction } from "@/g8/components/confirmed-action";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { isDraft } from "../lib/newsletter-types";
+import type { Issue } from "../lib/newsletter-types";
+import { asRec, num, rowsOf, str, versionNumber } from "../lib/newsletter-extra";
+import type { Rec } from "../lib/newsletter-extra";
+
+export interface IssueVersionsProps {
+  newsletterId: string;
+  issue: Pick<Issue, "id" | "status" | "subject">;
+  /** Called after a version was restored, so the editor reloads the draft. */
+  onRestored?: () => void;
+  /** Called with the new draft's id after Duplicate. */
+  onDuplicated?: (issueId: number) => void;
+  className?: string;
+}
+
+const when = (v: unknown): string => {
+  const d = new Date(str(v));
+  return Number.isNaN(d.getTime()) ? "" : d.toLocaleString();
+};
+
+export function IssueVersions({ newsletterId, issue, onRestored, onDuplicated, className }: IssueVersionsProps) {
+  const base = `/newsletters/${encodeURIComponent(newsletterId)}/issues/${issue.id}`;
+  const { ask, dialog, failure } = useConfirmAction();
+  const versions = useG8Query((signal) => g8Get(`${base}/versions`, undefined, { signal }), [base]);
+  const [sure, setSure] = useState<number | null>(null);
+  const restore = useG8Mutation((n: number) => g8Post(`${base}/versions/${n}/restore`), { onSuccess: () => { setSure(null); void versions.refetch(); onRestored?.(); } });
+  const rows = rowsOf<Rec>(versions.data?.data, "versions");
+  const draft = isDraft(issue);
+
+  return (
+    <div className={className}>
+      <div className="grid gap-4">
+        <SectionCard title="Duplicate" description="Copy this issue into a new draft you can change and send separately."
+          actions={<Button size="sm" variant="outline" onClick={() => ask({
+            tier: "external", title: `Duplicate "${issue.subject || `issue ${issue.id}`}"`, confirmLabel: "Duplicate",
+            description: "Creates a new draft with the same content. Nothing is sent to anyone.",
+            run: async () => { const id = num(asRec((await g8Post(`${base}/duplicate`)).data).id); if (id !== undefined) onDuplicated?.(id); },
+          })}><Copy className="size-4" />Duplicate issue</Button>}>
+          <p className="text-muted-foreground text-sm">The copy starts as a draft in this newsletter.</p>
+        </SectionCard>
+        <SectionCard title="Version history" description={draft ? "Restoring replaces the draft's current content." : "A sent issue cannot be changed; its versions are shown for reference."}>
+          {versions.error ? <ApiError error={versions.error} title="Could not load the versions" onRetry={() => void versions.refetch()} /> : versions.loading && !versions.data ? <Skeleton className="h-20 w-full" aria-busy="true" /> : rows.length === 0 ? (
+            <EmptyState compact title="No saved versions yet" description="A version is saved each time the issue is saved or rewritten." />
+          ) : (
+            <ul className="grid gap-2">
+              {rows.map((v, i) => {
+                const n = versionNumber(v);
+                return (
+                  <li key={n ?? i} className="flex items-center justify-between gap-3 rounded-md border p-3">
+                    <div className="min-w-0 text-sm"><span className="font-medium">Version {n ?? i + 1}</span>{str(v.source) ? <span className="text-muted-foreground"> from {str(v.source).replace(/_/g, " ")}</span> : null}<span className="text-muted-foreground block text-xs">{when(v.created_at)}{str(v.subject) ? ` · ${str(v.subject)}` : ""}</span></div>
+                    {draft && n !== undefined ? (
+                      sure === n ? (
+                        <div className="flex gap-1"><Button size="sm" loading={restore.loading} onClick={() => void restore.mutate(n)}>Replace the draft</Button><Button size="sm" variant="ghost" onClick={() => setSure(null)}>Cancel</Button></div>
+                      ) : <Button size="sm" variant="outline" aria-label={`Restore version ${n}`} onClick={() => setSure(n)}>Restore</Button>
+                    ) : null}
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          {restore.error ? <ApiError error={restore.error} title="Could not restore that version" /> : null}
+        </SectionCard>
+        {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      </div>
+      <ConfirmSpendDialog {...dialog} />
+    </div>
+  );
+}

package/blocks/newsletter/components/more-rows.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+/**
+ * MoreRows: the honest end of a list that the API pages. Shows how many rows are on screen and, while the API has
+ * another page, a "Load more" button. A list never ends silently: either every row is reachable or this says there are more.
+ * (Same contract as the foundation's LoadMore; kept local so the newsletter block does not wait on it.)
+ *
+ * SDK operations: none.
+ */
+import { Button } from "@graph8/sdk/ui";
+
+export interface MoreRowsProps {
+  /** Rows on screen. */
+  shown: number;
+  /** What the rows are, plural: "people". */
+  noun: string;
+  hasMore: boolean;
+  loading?: boolean;
+  onMore: () => void;
+}
+
+export function MoreRows({ shown, noun, hasMore, loading, onMore }: MoreRowsProps) {
+  if (!hasMore) return null;
+  return (
+    <div className="text-muted-foreground flex items-center justify-between gap-3 py-2 text-sm">
+      <span role="status">Showing {shown.toLocaleString()} {noun}</span>
+      <Button type="button" variant="outline" size="sm" loading={loading} onClick={onMore}>Load more</Button>
+    </div>
+  );
+}

package/blocks/newsletter/components/newsletter-editor.tsx

@@ -81,7 +81,7 @@ export function NewsletterEditor({ initialNewsletterId, onSelectIssue }: Newslet
         {!current ? <EmptyState title="Pick a newsletter" description="Choose a newsletter to see its issues, or create one." /> : (
           <>
             <div className="flex items-center justify-between">
-              <h2 className="text-lg font-semibold">{current.name} <span className="text-muted-foreground text-sm font-normal">{current.status}</span></h2>
+              <h2 className="text-lg font-medium">{current.name} <span className="text-muted-foreground text-sm font-normal">{current.status}</span></h2>
               {live ? <Button variant="outline" size="sm" loading={pause.loading} onClick={() => void pause.mutate(undefined)}>Pause newsletter</Button> : <Button size="sm" onClick={() => setPending({ kind: "activate" })}>Activate newsletter</Button>}
             </div>
             {pause.error ? <ApiError error={pause.error} title="Could not pause" /> : null}

package/blocks/newsletter/components/newsletter-list-syncs.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+/**
+ * NewsletterListSyncs: keep subscribers in step with your lists. A synced list adds its contacts as subscribers; run a
+ * sync now to pull in the latest, or turn it off.
+ *
+ * SDK operations, in the order the screen uses them:
+ *   1. listNewsletterListSyncs     GET    /newsletters/{id}/list-syncs                       (read)
+ *   2. listLists                   GET    /lists?page&limit&search (paged, "Load more")      (read; the lists you can turn on)
+ *   3. enableNewsletterListSync    POST   /newsletters/{id}/list-syncs { audience_list_id, attested_text }   (write, confirmed: people are subscribed to a newsletter)
+ *   4. runNewsletterListSync       POST   /newsletters/{id}/list-syncs/{list}/run            (write, confirmed: adds the list's people now)
+ *   5. disableNewsletterListSync   DELETE /newsletters/{id}/list-syncs/{list}                (destructive, confirmed: stops syncing; subscribers stay)
+ *
+ * Turning a sync on subscribes real people, so the person confirms the consent statement first: the exact text is shown
+ * and sent as `attested_text`. The consent claim is theirs; the dialog does not pretend otherwise.
+ */
+import { useState } from "react";
+import { Button, Input } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useConfirmAction } from "@/g8/components/confirmed-action";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { usePaginated } from "@/g8/hooks/use-paginated";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { asRec, num, pageOf, rowsOf, str } from "../lib/newsletter-extra";
+import type { Rec } from "../lib/newsletter-extra";
+import { MoreRows } from "./more-rows";
+
+export interface NewsletterListSyncsProps {
+  newsletterId: string;
+  /** Called after a sync changed who is subscribed. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+export const CONSENT_TEXT = "I confirm the people in this list agreed to receive this newsletter.";
+const PAGE = 50;
+
+export function NewsletterListSyncs({ newsletterId, onChanged, className }: NewsletterListSyncsProps) {
+  const base = `/newsletters/${encodeURIComponent(newsletterId)}/list-syncs`;
+  const { ask, dialog, failure } = useConfirmAction();
+  const [search, setSearch] = useState("");
+  const [note, setNote] = useState("");
+  const syncs = useG8Query((signal) => g8Get(base, undefined, { signal }), [newsletterId]);
+  const rows = rowsOf<Rec>(syncs.data?.data, "list_syncs");
+  // Disabled rows stay in the API list (so they can be turned back on): only enabled ones count as synced.
+  const synced = new Set(rows.filter((r) => r.enabled !== false).map((r) => String(r.audience_list_id)));
+  const lists = usePaginated<Rec>(async (cursor, signal) => {
+    const page = cursor ? Number(cursor) : 1;
+    const res = await g8Get("/lists", { limit: PAGE, page, search: search.trim() || undefined }, { signal });
+    const got = rowsOf<Rec>(res.data, "lists");
+    const more = (res.pagination as { has_next?: boolean } | undefined)?.has_next ?? got.length >= PAGE;
+    return pageOf(got, more && got.length > 0 ? page + 1 : null);
+  }, [search]);
+  const changed = (): void => { void syncs.refetch(); onChanged?.(); };
+
+  const enable = (l: { id?: unknown; title?: unknown; name?: unknown }): void => ask({
+    tier: "external", title: `Subscribe "${str(l.title) || str(l.name)}" to this newsletter`, confirmLabel: "Turn on sync",
+    description: <><p>People in this list become subscribers and will receive issues. You are confirming:</p><p className="mt-2 font-medium">{CONSENT_TEXT}</p></>,
+    run: () => g8Post(base, { audience_list_id: Number(l.id), attested_text: CONSENT_TEXT }), onDone: changed,
+  });
+  const run = (s: Rec): void => ask({
+    tier: "external", title: `Sync "${str(s.name)}" now`, confirmLabel: "Sync now",
+    recipients: num(s.contact_count),
+    description: "Adds the list's people who are not subscribed yet. People who unsubscribed stay unsubscribed.",
+    run: async () => { await g8Post(`${base}/${encodeURIComponent(String(s.audience_list_id))}/run`); setNote(`Synced "${str(s.name)}".`); }, onDone: changed,
+  });
+  const disable = (s: Rec): void => ask({
+    tier: "destructive", title: `Stop syncing "${str(s.name)}"`, confirmLabel: "Stop syncing",
+    description: "New contacts added to this list are no longer subscribed. People already subscribed stay subscribed.",
+    tolerateStatus: [404], run: () => g8Delete(`${base}/${encodeURIComponent(String(s.audience_list_id))}`), onDone: changed,
+  });
+
+  return (
+    <div className={className}>
+      <div className="grid gap-4">
+        <SectionCard title="Synced lists" description="Subscribers are kept in step with these lists.">
+          {syncs.error ? <ApiError error={syncs.error} title="Could not load the synced lists" onRetry={() => void syncs.refetch()} /> : rows.length === 0 ? (
+            <EmptyState compact title="No lists are synced" description="Choose a list below to subscribe its people." />
+          ) : (
+            <ul className="grid gap-2">
+              {rows.map((s) => (
+                <li key={String(s.audience_list_id)} className="flex items-center justify-between gap-3 rounded-md border p-3">
+                  <div className="min-w-0"><span className="block truncate text-sm font-medium">{str(s.name) || `List ${String(s.audience_list_id)}`}</span><span className="text-muted-foreground text-xs">{num(s.contact_count) == null ? "" : `${(s.contact_count as number).toLocaleString()} contacts`}</span></div>
+                  {s.enabled === false ? <StatusPill tone="neutral">Off</StatusPill> : <StatusPill tone="positive">On</StatusPill>}
+                  {s.enabled === false ? (
+                    <Button size="sm" variant="outline" aria-label={`Turn ${str(s.name)} back on`} onClick={() => enable({ id: s.audience_list_id, name: s.name })}>Turn on sync</Button>
+                  ) : <div className="flex gap-1"><Button size="sm" variant="outline" aria-label={`Sync ${str(s.name)} now`} onClick={() => run(s)}>Sync now</Button><Button size="sm" variant="ghost" aria-label={`Stop syncing ${str(s.name)}`} onClick={() => disable(s)}>Stop</Button></div>}
+                </li>
+              ))}
+            </ul>
+          )}
+          {note ? <p role="status" className="mt-2 text-sm">{note}</p> : null}
+        </SectionCard>
+        <SectionCard title="Add a list" description="Find the list to subscribe.">
+          <Input aria-label="Search lists" placeholder="Search lists" value={search} onChange={(e) => setSearch(e.target.value)} className="mb-3 max-w-sm" />
+          {lists.error ? <ApiError error={lists.error} title="Could not load your lists" onRetry={() => void lists.reload()} /> : lists.loading ? <p className="text-muted-foreground text-sm" aria-busy="true">Loading lists...</p> : lists.items.length === 0 ? (
+            <EmptyState compact title={search ? "No list matches" : "You have no lists"} description={search ? "Try another name." : "Create a list in Lists first."} />
+          ) : (
+            <>
+              <ul className="grid gap-2">
+                {lists.items.map((l) => (
+                  <li key={String(l.id)} className="flex items-center justify-between gap-3 rounded-md border p-3">
+                    <span className="truncate text-sm">{str(l.title)}</span>
+                    {synced.has(String(l.id)) ? <StatusPill tone="positive">Synced</StatusPill> : <Button size="sm" variant="outline" aria-label={`Sync ${str(l.title)}`} onClick={() => enable(l)}>Turn on sync</Button>}
+                  </li>
+                ))}
+              </ul>
+              <MoreRows shown={lists.items.length} noun="lists" hasMore={lists.hasMore} loading={lists.loadingMore} onMore={() => void lists.loadMore()} />
+            </>
+          )}
+        </SectionCard>
+        {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      </div>
+      <ConfirmSpendDialog {...dialog} />
+    </div>
+  );
+}