@graph8/sdk 0.370.0 → 0.373.0

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

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

@@ -5,10 +5,13 @@
  *
  * Composes: ScreenLayout (title, tabs, stats), Toolbar, SplitView + DetailPanel (selected issue, deep link
  * `?id=`), FormSheet (new newsletter), IssueForm (write, AI, test, delete), IssueScheduler (send, schedule,
- * pause, resume, cancel), SubscriberTable (add, import a list, verify, unsubscribe, erase), NewsletterStats.
+ * pause, resume, cancel), SubscriberTable (add, import a list, verify, unsubscribe, erase), NewsletterStats,
+ * NewsletterSettings (name, sender, opt-in, sending domain, running state), NewsletterListSyncs, NewsletterTemplates,
+ * IssueVersions (history, restore, duplicate) and SubscriberTimeline.
  *
  * Every record has a full detail view: `?tab=` picks Issues, Subscribers, Performance or Details (the newsletter itself);
- * `?id=` opens an issue (Write, Send, Results, Details) or a subscriber (all fields, unsubscribe, erase);
+ * `?id=` opens an issue (Write, Send, Results, History, Details) or a subscriber (all fields, activity, unsubscribe, erase);
+ * the Settings, Lists and Templates tabs manage the newsletter itself, its synced lists and its saved templates;
  * `&view=full` shows the open record as a full page.
  *
  * User flows: pick or create a newsletter (`?newsletter=`), activate or pause it, read the headline numbers,
@@ -39,12 +42,18 @@ import { Toolbar } from "@/g8/components/screen/toolbar";
 import { useUrlState } from "@/g8/hooks/use-url-state";
 import { g8Delete, g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useAllPages } from "@/g8/hooks/use-all-pages";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { isDraft, issueTitle, percent } from "../lib/newsletter-types";
 import type { Issue, IssueKpis, Newsletter, Subscriber } from "../lib/newsletter-types";
 import { IssueForm } from "./issue-form";
 import { IssueScheduler } from "./issue-scheduler";
+import { IssueVersions } from "./issue-versions";
+import { NewsletterListSyncs } from "./newsletter-list-syncs";
+import { NewsletterSettings } from "./newsletter-settings";
 import { NewsletterStats } from "./newsletter-stats";
+import { NewsletterTemplates } from "./newsletter-templates";
+import { SubscriberTimeline } from "./subscriber-timeline";
 import { SubscriberTable } from "./subscriber-table";
 import { useBrand } from "@/g8/hooks/use-brand";
 
@@ -58,7 +67,9 @@ export interface NewsletterScreenProps {
   className?: string;
 }
 
-type Tab = "issues" | "subscribers" | "performance" | "details";
+type Tab = "issues" | "subscribers" | "performance" | "details" | "settings" | "lists" | "templates";
+/** Subscribers per read when looking one up for a deep link; every page is read. */
+const SUBSCRIBER_PAGE = 100; // the API caps page_size at 100 (a larger value is a 422)
 const SELECT = "border-input bg-background h-9 rounded-md border px-2 text-sm";
 
 function tone(status: string | undefined): Tone {
@@ -119,7 +130,7 @@ function IssueDetails({ issue }: { issue: Issue }) {
   );
 }
 
-function SubscriberDetail({ newsletterId, subscriber, onChanged, onClose, expandProps }: { newsletterId: string; subscriber: Subscriber; onChanged: () => void; onClose: () => void; expandProps: { onExpand: () => void; onCollapse?: () => void } }) {
+function SubscriberDetail({ newsletterId, subscriber, issues, onChanged, onClose, expandProps }: { newsletterId: string; subscriber: Subscriber; issues?: Issue[]; onChanged: () => void; onClose: () => void; expandProps: { onExpand: () => void; onCollapse?: () => void } }) {
   const [confirm, setConfirm] = useState<"unsubscribe" | "erase" | null>(null);
   const base = `/newsletters/${encodeURIComponent(newsletterId)}/subscribers/${subscriber.id}`;
   const run = useG8Mutation((kind: "unsubscribe" | "erase") => (kind === "unsubscribe" ? g8Patch(`${base}/unsubscribe`, {}) : g8Delete(base)), {
@@ -155,6 +166,7 @@ function SubscriberDetail({ newsletterId, subscriber, onChanged, onClose, expand
           ...extra.map(([key, v]) => ({ label: key.replace(/_/g, " "), value: String(v) })),
         ]}
       />
+      {issues ? <SubscriberTimeline className="mt-4" newsletterId={newsletterId} subscriberId={subscriber.id} issues={issues} /> : null}
       <ConfirmSpendDialog
         open={confirm !== null}
         tier={confirm === "erase" ? "destructive" : "external"}
@@ -177,7 +189,7 @@ export function NewsletterScreen({ initialNewsletterId, renderRowActions, render
   const [view, setView] = useUrlState("view", "");
   const expandProps = { onExpand: () => setView("full"), onCollapse: view === "full" ? () => setView(null) : undefined };
   const [tabParam, setTabParam] = useUrlState("tab", "issues");
-  const tab = (["issues", "subscribers", "performance", "details"].includes(tabParam) ? tabParam : "issues") as Tab;
+  const tab = (["issues", "subscribers", "performance", "details", "settings", "lists", "templates"].includes(tabParam) ? tabParam : "issues") as Tab;
   const closeDetail = (): void => { setIssueParam(null); setView(null); };
   const [subRefresh, setSubRefresh] = useState(0);
   const [openedSubscriber, setOpenedSubscriber] = useState<Subscriber | null>(null);
@@ -187,6 +199,8 @@ export function NewsletterScreen({ initialNewsletterId, renderRowActions, render
   const [name, setName] = useState("");
   const [goal, setGoal] = useState("");
   const [pending, setPending] = useState<"create" | "activate" | null>(null);
+  // Bumped after a version restore so the editor reloads the draft instead of showing the old text.
+  const [formRev, setFormRev] = useState(0);
 
   const newsletters = useG8Query((signal) => g8Get<Newsletter[]>("/newsletters", {}, { signal }).then((r) => r.data ?? []), []);
   const list = newsletters.data ?? [];
@@ -209,12 +223,17 @@ export function NewsletterScreen({ initialNewsletterId, renderRowActions, render
   const pause = useG8Mutation(() => g8Post(`${base}/pause`), { onSuccess: () => void newsletters.refetch() });
 
   const subscriberId = tab === "subscribers" && issueParam ? Number(issueParam) : undefined;
-  const lookup = useG8Query(
-    (signal) => g8Get<{ items?: Subscriber[] }>(`${base}/subscribers`, { page: 1, page_size: 200 }, { signal }).then((r) => r.data?.items ?? []),
+  // A deep link to a subscriber reads every page (100 per read), so no subscriber is out of reach.
+  const lookup = useAllPages<Subscriber>(
+    async (page, signal) => {
+      const r = await g8Get<{ items?: Subscriber[]; total?: number }>(`${base}/subscribers`, { page, page_size: SUBSCRIBER_PAGE }, { signal });
+      const rows = r.data?.items ?? [];
+      return { rows, hasNext: r.data?.total != null ? page * SUBSCRIBER_PAGE < r.data.total : rows.length >= SUBSCRIBER_PAGE };
+    },
     [base, subRefresh],
-    { enabled: subscriberId !== undefined && openedSubscriber?.id !== subscriberId },
+    { enabled: Boolean(newsletterId) && subscriberId !== undefined && openedSubscriber?.id !== subscriberId },
   );
-  const openSubscriber = subscriberId === undefined ? null : openedSubscriber?.id === subscriberId ? openedSubscriber : ((lookup.data ?? []).find((x) => x.id === subscriberId) ?? null);
+  const openSubscriber = subscriberId === undefined ? null : openedSubscriber?.id === subscriberId ? openedSubscriber : (lookup.items.find((x) => x.id === subscriberId) ?? null);
   const all = issues.data ?? [];
   const sent = all.filter((i) => i.status === "sent" || i.sent_at);
   const totals = sent.reduce((a, i) => ({ delivered: a.delivered + (i.kpis?.delivered ?? 0), opened: a.opened + (i.kpis?.opened ?? 0), clicked: a.clicked + (i.kpis?.clicked ?? 0) }), { delivered: 0, opened: 0, clicked: 0 });
@@ -227,9 +246,10 @@ export function NewsletterScreen({ initialNewsletterId, renderRowActions, render
   const pickNewsletter = (id: string): void => { setIssueParam(null); setUrlNewsletter(id); };
   const detailTabs = selected
     ? [
-        { id: "write", label: isDraft(selected) ? "Write" : "Content", content: <IssueForm key={`f${selected.id}`} newsletterId={newsletterId} issueId={selected.id} onSaved={() => void issues.refetch()} onDeleted={() => { setIssueParam(null); void issues.refetch(); }} /> },
+        { id: "write", label: isDraft(selected) ? "Write" : "Content", content: <IssueForm key={`f${selected.id}:${formRev}`} newsletterId={newsletterId} issueId={selected.id} onSaved={() => void issues.refetch()} onDeleted={() => { setIssueParam(null); void issues.refetch(); }} /> },
         { id: "send", label: "Send", content: <IssueScheduler key={`s${selected.id}`} newsletterId={newsletterId} issueId={selected.id} onSent={() => void issues.refetch()} /> },
         { id: "results", label: "Results", content: <IssueResults newsletterId={newsletterId} issue={selected} /> },
+        { id: "history", label: "History", content: <IssueVersions key={`v${selected.id}:${formRev}`} newsletterId={newsletterId} issue={selected} onRestored={() => { setFormRev((n) => n + 1); void issues.refetch(); }} onDuplicated={(id) => { void issues.refetch(); setIssueParam(String(id)); }} /> },
         { id: "details", label: "Issue details", content: <IssueDetails issue={selected} /> },
         ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(selected) })),
       ]
@@ -287,9 +307,9 @@ export function NewsletterScreen({ initialNewsletterId, renderRowActions, render
       detailWidth="lg"
       list={<SubscriberTable key={newsletterId} newsletterId={newsletterId} refreshKey={subRefresh} selectedId={subscriberId} onOpen={(sub) => { setOpenedSubscriber(sub); setIssueParam(String(sub.id)); }} />}
       detail={openSubscriber ? (
-        <SubscriberDetail key={openSubscriber.id} newsletterId={newsletterId} subscriber={openSubscriber} onChanged={() => { setSubRefresh((n) => n + 1); setOpenedSubscriber(null); }} onClose={() => { closeDetail(); setOpenedSubscriber(null); }} expandProps={expandProps} />
+        <SubscriberDetail key={openSubscriber.id} newsletterId={newsletterId} subscriber={openSubscriber} issues={all} onChanged={() => { setSubRefresh((n) => n + 1); setOpenedSubscriber(null); }} onClose={() => { closeDetail(); setOpenedSubscriber(null); }} expandProps={expandProps} />
       ) : lookup.loading ? <Skeleton className="h-40 w-full" aria-busy="true" /> : (
-        <EmptyState title="Subscriber not found" description="Open a subscriber from the list. Direct links reach the first 200 subscribers." />
+        <EmptyState title="Subscriber not found" description="Open a subscriber from the list." />
       )}
     />
   )
@@ -320,6 +340,9 @@ export function NewsletterScreen({ initialNewsletterId, renderRowActions, render
       </DetailPanel>
     )
     : tab === "performance" ? <NewsletterStats key={newsletterId} newsletterId={newsletterId} />
+    : tab === "settings" ? <NewsletterSettings key={newsletterId} newsletterId={newsletterId} onChanged={() => void newsletters.refetch()} />
+    : tab === "lists" ? <NewsletterListSyncs key={newsletterId} newsletterId={newsletterId} onChanged={() => setSubRefresh((n) => n + 1)} />
+    : tab === "templates" ? <NewsletterTemplates key={newsletterId} newsletterId={newsletterId} onUsed={(id) => { void issues.refetch(); setTabParam(null); setIssueParam(String(id)); }} />
     : (
       <SplitView
         detailOpen={detailOpen}
@@ -364,7 +387,7 @@ export function NewsletterScreen({ initialNewsletterId, renderRowActions, render
           <Button size="sm" onClick={() => setSheet(true)}><Plus className="size-4" />New newsletter</Button>
         </>
       )}
-      tabs={current ? [{ id: "issues", label: "Issues", count: all.length }, { id: "subscribers", label: "Subscribers", count: audience.data }, { id: "performance", label: "Performance" }, { id: "details", label: "Details" }] : undefined}
+      tabs={current ? [{ id: "issues", label: "Issues", count: all.length }, { id: "subscribers", label: "Subscribers", count: audience.data }, { id: "performance", label: "Performance" }, { id: "templates", label: "Templates" }, { id: "lists", label: "Lists" }, { id: "settings", label: "Settings" }, { id: "details", label: "Details" }] : undefined}
       activeTab={tab}
       onTabChange={(id) => { setTabParam(id === "issues" ? null : id); closeDetail(); setOpenedSubscriber(null); }}
       stats={current ? [