@graph8/sdk 0.358.0 → 0.362.0

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

@@ -0,0 +1,402 @@
+"use client";
+
+/**
+ * NewsletterScreen: the finished newsletter workspace. No props needed.
+ *
+ * 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.
+ *
+ * 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);
+ * `&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,
+ * search and filter issues, write a new issue, edit a draft, generate it with AI, send yourself a test, send now
+ * or schedule it, follow and pause/resume/cancel the send, read per-issue results, manage subscribers, and
+ * compare every sent issue. Needs a verified sending domain in the graph8 app before issues can be delivered.
+ *
+ * SDK operations: listNewsletters, createNewsletter (external, confirmed), listIssues, activateNewsletter
+ * (external, confirmed), pauseNewsletter, listSubscribers (count only), getIssueAnalyticsKpis; everything else
+ * lives in the composed parts, which confirm every send, import, verify, unsubscribe and erase.
+ */
+
+import { useEffect, useState } from "react";
+import type { ReactNode } from "react";
+import { Mail, Pause, Play, Plus, Send, UserMinus, Trash2 } from "lucide-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 { EmptyState } from "@/g8/components/empty-state";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import type { Tone } from "@/g8/components/screen/status-pill";
+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 { 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 { NewsletterStats } from "./newsletter-stats";
+import { SubscriberTable } from "./subscriber-table";
+
+export interface NewsletterScreenProps {
+  /** Open this newsletter first when the URL does not name one. */
+  initialNewsletterId?: string;
+  renderRowActions?: (issue: Issue) => ReactNode;
+  renderDetailActions?: (issue: Issue) => ReactNode;
+  extraDetailTabs?: { id: string; label: string; render: (issue: Issue) => ReactNode }[];
+  toolbarActions?: ReactNode;
+  className?: string;
+}
+
+type Tab = "issues" | "subscribers" | "performance" | "details";
+const SELECT = "border-input bg-background h-9 rounded-md border px-2 text-sm";
+
+function tone(status: string | undefined): Tone {
+  if (status === "sent") return "positive";
+  if (status === "sending" || status === "scheduled") return "info";
+  if (status === "failed") return "negative";
+  return "neutral";
+}
+
+function IssueResults({ newsletterId, issue }: { newsletterId: string; issue: Issue }) {
+  const res = useG8Query(
+    (signal) => g8Get<{ stale?: boolean; kpis?: IssueKpis; last_updated_at?: string | null }>(`/newsletters/${encodeURIComponent(newsletterId)}/issues/${issue.id}/analytics/kpis`, {}, { signal }).then((r) => r.data),
+    [newsletterId, issue.id],
+    { enabled: !isDraft(issue) },
+  );
+  if (isDraft(issue)) return <EmptyState title="No results yet" description="Numbers appear after this issue is sent." />;
+  if (res.error) return <ApiError error={res.error} title="Could not load the numbers" onRetry={() => void res.refetch()} />;
+  if (res.loading && !res.data) return <Skeleton className="h-24 w-full" aria-busy="true" />;
+  if (res.data?.stale) return <p role="alert" className="flex items-center gap-2 text-sm"><StatusPill tone="warning">Stale</StatusPill>The numbers could not be read just now. This is not zero engagement: try again in a minute.</p>;
+  const k = res.data?.kpis;
+  return (
+    <KeyValueList
+      columns={2}
+      items={[
+        { label: "Delivered", value: `${(k?.delivered ?? 0).toLocaleString()} of ${(k?.total ?? 0).toLocaleString()}` },
+        { label: "Opened", value: `${(k?.opened ?? 0).toLocaleString()} (${percent(k?.opened, k?.delivered)})` },
+        { label: "Clicked", value: `${(k?.clicked ?? 0).toLocaleString()} (${percent(k?.clicked, k?.delivered)})` },
+        { label: "Bounced", value: `${(k?.bounced ?? 0).toLocaleString()} (${percent(k?.bounced, k?.total)})` },
+        { label: "Unsubscribed", value: (k?.unsubscribed_attributed ?? 0).toLocaleString() },
+        { label: "Complaints", value: (k?.complained ?? 0).toLocaleString() },
+      ]}
+    />
+  );
+}
+
+const when = (v: string | null | undefined): string => (v ? new Date(v).toLocaleString() : "");
+
+function IssueDetails({ issue }: { issue: Issue }) {
+  const k = issue.kpis;
+  return (
+    <KeyValueList
+      columns={2}
+      items={[
+        { label: "Issue id", value: String(issue.id) },
+        { label: "Status", value: issue.status ?? "draft" },
+        { label: "Subject", value: issue.subject || "Not set" },
+        { label: "Preview text", value: issue.preview_text || "Not set" },
+        { label: "Sender name", value: issue.sender_name || "Newsletter default" },
+        { label: "Sender email", value: issue.sender_email || "Newsletter default" },
+        { label: "Reply to", value: issue.reply_to || "Not set" },
+        { label: "Scheduled", value: when(issue.scheduled_at) || "Not scheduled" },
+        { label: "Sent", value: when(issue.sent_at) || "Not sent" },
+        { label: "Delivered", value: k?.delivered == null ? "Not sent" : k.delivered.toLocaleString() },
+        { label: "Opened", value: k?.opened == null ? "Not sent" : `${k.opened.toLocaleString()} (${percent(k.opened, k.delivered)})` },
+        { label: "Clicked", value: k?.clicked == null ? "Not sent" : `${k.clicked.toLocaleString()} (${percent(k.clicked, k.delivered)})` },
+      ]}
+    />
+  );
+}
+
+function SubscriberDetail({ newsletterId, subscriber, onChanged, onClose, expandProps }: { newsletterId: string; subscriber: Subscriber; 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)), {
+    onSuccess: (_r, kind) => { setConfirm(null); onChanged(); if (kind === "erase") onClose(); },
+  });
+  const unsubscribed = subscriber.status === "unsubscribed";
+  const known = new Set(["id", "email", "first_name", "last_name", "status", "verification_status", "created_at"]);
+  const extra = Object.entries(subscriber).filter(([key, v]) => !known.has(key) && v != null && typeof v !== "object");
+  return (
+    <DetailPanel
+      title={subscriber.email}
+      subtitle={[subscriber.first_name, subscriber.last_name].filter(Boolean).join(" ") || undefined}
+      badges={<StatusPill tone={unsubscribed ? "neutral" : subscriber.status === "subscribed" ? "positive" : "warning"}>{subscriber.status ?? "unknown"}</StatusPill>}
+      actions={(
+        <>
+          {!unsubscribed ? <Button size="sm" variant="outline" onClick={() => setConfirm("unsubscribe")}><UserMinus className="size-4" />Unsubscribe</Button> : null}
+          <Button size="sm" variant="ghost" onClick={() => setConfirm("erase")}><Trash2 className="size-4" />Erase</Button>
+        </>
+      )}
+      onClose={onClose}
+      {...expandProps}
+    >
+      <KeyValueList
+        columns={2}
+        items={[
+          { label: "Email", value: subscriber.email },
+          { label: "First name", value: subscriber.first_name || "Not set" },
+          { label: "Last name", value: subscriber.last_name || "Not set" },
+          { label: "Status", value: subscriber.status ?? "unknown" },
+          { label: "Address check", value: subscriber.verification_status || "Not checked" },
+          { label: "Subscribed", value: when(subscriber.created_at) || "Not set" },
+          { label: "Subscriber id", value: String(subscriber.id) },
+          ...extra.map(([key, v]) => ({ label: key.replace(/_/g, " "), value: String(v) })),
+        ]}
+      />
+      <ConfirmSpendDialog
+        open={confirm !== null}
+        tier={confirm === "erase" ? "destructive" : "external"}
+        title={confirm === "erase" ? `Erase ${subscriber.email}?` : `Unsubscribe ${subscriber.email}?`}
+        affected={confirm === "erase" ? 1 : undefined}
+        description={<><p>{confirm === "erase" ? "This removes the person and the record that they opted out. Use only for an erasure request." : "They stay in the list as unsubscribed and will not be mailed."}</p>{run.error ? <ApiError error={run.error} title="That did not work" /> : null}</>}
+        confirmLabel={confirm === "erase" ? "Erase" : "Unsubscribe"}
+        confirming={run.loading}
+        onCancel={() => setConfirm(null)}
+        onConfirm={() => { if (confirm) void run.mutate(confirm); }}
+      />
+    </DetailPanel>
+  );
+}
+
+export function NewsletterScreen({ initialNewsletterId, renderRowActions, renderDetailActions, extraDetailTabs, toolbarActions, className }: NewsletterScreenProps) {
+  const [urlNewsletter, setUrlNewsletter] = useUrlState("newsletter", initialNewsletterId ?? "");
+  const [issueParam, setIssueParam] = useUrlState("id", "");
+  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 closeDetail = (): void => { setIssueParam(null); setView(null); };
+  const [subRefresh, setSubRefresh] = useState(0);
+  const [openedSubscriber, setOpenedSubscriber] = useState<Subscriber | null>(null);
+  const [search, setSearch] = useState("");
+  const [statusFilter, setStatusFilter] = useState("");
+  const [sheet, setSheet] = useState(false);
+  const [name, setName] = useState("");
+  const [goal, setGoal] = useState("");
+  const [pending, setPending] = useState<"create" | "activate" | null>(null);
+
+  const newsletters = useG8Query((signal) => g8Get<Newsletter[]>("/newsletters", {}, { signal }).then((r) => r.data ?? []), []);
+  const list = newsletters.data ?? [];
+  const newsletterId = urlNewsletter || list[0]?.id || "";
+  const current = list.find((n) => n.id === newsletterId);
+  const base = `/newsletters/${encodeURIComponent(newsletterId)}`;
+  const issues = useG8Query((signal) => g8Get<Issue[]>(`${base}/issues`, {}, { signal }).then((r) => r.data ?? []), [base], { enabled: Boolean(newsletterId) });
+  const audience = useG8Query((signal) => g8Get<{ total?: number }>(`${base}/subscribers`, { status: "subscribed", page_size: 1 }, { signal }).then((r) => r.data?.total ?? 0), [base], { enabled: Boolean(newsletterId) });
+
+  // Everything open belongs to one newsletter: switching clears the selected issue and the filters.
+  useEffect(() => {
+    setSearch("");
+    setStatusFilter("");
+  }, [newsletterId]);
+
+  const create = useG8Mutation(async () => (await g8Post<Newsletter>("/newsletters", { name: name.trim(), goal: goal.trim() || undefined })).data, {
+    onSuccess: (created) => { setPending(null); setSheet(false); setName(""); setGoal(""); setIssueParam(null); setUrlNewsletter(created.id); void newsletters.refetch(); },
+  });
+  const activate = useG8Mutation(() => g8Post(`${base}/activate`), { onSuccess: () => { setPending(null); void newsletters.refetch(); } });
+  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 ?? []),
+    [base, subRefresh],
+    { enabled: subscriberId !== undefined && openedSubscriber?.id !== subscriberId },
+  );
+  const openSubscriber = subscriberId === undefined ? null : openedSubscriber?.id === subscriberId ? openedSubscriber : ((lookup.data ?? []).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 });
+  const q = search.trim().toLowerCase();
+  const shown = all.filter((i) => (!statusFilter || (i.status ?? "draft") === statusFilter) && (!q || issueTitle(i).toLowerCase().includes(q)));
+  const selected = issueParam === "new" ? undefined : all.find((i) => String(i.id) === issueParam);
+  const detailOpen = issueParam === "new" || Boolean(selected);
+  const live = current?.status === "active";
+
+  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: "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: "details", label: "Issue details", content: <IssueDetails issue={selected} /> },
+        ...(extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(selected) })),
+      ]
+    : undefined;
+
+  const detail = issueParam === "new" ? (
+    <DetailPanel title="New issue" subtitle={current?.name} onClose={closeDetail} {...expandProps}>
+      <IssueForm key="new" newsletterId={newsletterId} onSaved={(saved) => { void issues.refetch(); setIssueParam(String(saved.id)); }} />
+    </DetailPanel>
+  ) : selected ? (
+    <DetailPanel
+      title={issueTitle(selected)}
+      subtitle={selected.sent_at ? `Sent ${new Date(selected.sent_at).toLocaleString()}` : selected.scheduled_at ? `Scheduled ${new Date(selected.scheduled_at).toLocaleString()}` : "Draft"}
+      badges={<StatusPill tone={tone(selected.status)}>{selected.status ?? "draft"}</StatusPill>}
+      actions={renderDetailActions?.(selected)}
+      tabs={detailTabs}
+      onClose={closeDetail}
+      {...expandProps}
+    />
+  ) : null;
+
+  const issueList = issues.error ? <ApiError error={issues.error} title="Could not load issues" onRetry={() => void issues.refetch()} /> : issues.loading && !issues.data ? (
+    <div aria-busy="true" className="grid gap-2"><Skeleton className="h-14 w-full" /><Skeleton className="h-14 w-full" /><Skeleton className="h-14 w-full" /></div>
+  ) : shown.length === 0 ? (
+    <EmptyState icon={<Mail className="size-8" />} title={all.length === 0 ? "No issues yet" : "No issues match"} description={all.length === 0 ? "Write the first issue, send yourself a test, then send it to your subscribers." : "Try another search or status."} action={all.length === 0 ? <Button onClick={() => setIssueParam("new")}>Write the first issue</Button> : undefined} />
+  ) : (
+    <ul className="grid gap-2">
+      {shown.map((i) => (
+        <li key={i.id} className={`flex items-center justify-between gap-3 rounded-md border p-3 ${String(i.id) === issueParam ? "bg-muted" : ""}`}>
+          <button type="button" className="min-w-0 flex-1 text-left" onClick={() => setIssueParam(String(i.id))}>
+            <span className="block truncate font-medium">{issueTitle(i)}</span>
+            <span className="text-muted-foreground block text-xs">
+              {i.sent_at ? `Sent ${new Date(i.sent_at).toLocaleDateString()}` : i.scheduled_at ? `Scheduled ${new Date(i.scheduled_at).toLocaleString()}` : "Not sent"}
+              {i.kpis?.delivered ? ` · ${percent(i.kpis.opened, i.kpis.delivered)} opened · ${percent(i.kpis.clicked, i.kpis.delivered)} clicked` : ""}
+            </span>
+          </button>
+          <StatusPill tone={tone(i.status)}>{i.status ?? "draft"}</StatusPill>
+          {renderRowActions?.(i)}
+        </li>
+      ))}
+    </ul>
+  );
+
+  const body = !current ? (
+    newsletters.error ? <ApiError error={newsletters.error} title="Could not load newsletters" onRetry={() => void newsletters.refetch()} /> :
+    newsletters.loading && !newsletters.data ? <Skeleton className="h-40 w-full" aria-busy="true" /> : (
+      <EmptyState icon={<Mail className="size-8" />} title="Create your first newsletter" description="A newsletter holds your issues and subscribers. Nothing is sent until you activate it and send an issue." action={<Button onClick={() => setSheet(true)}>New newsletter</Button>} />
+    )
+  ) : tab === "subscribers" ? (
+    <SplitView
+      detailOpen={subscriberId !== undefined}
+      onCloseDetail={closeDetail}
+        expanded={view === "full"}
+        onExpandedChange={(e) => setView(e ? "full" : null)}
+      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} />
+      ) : 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." />
+      )}
+    />
+  )
+    : tab === "details" ? (
+      <DetailPanel
+        title={current.name}
+        subtitle={current.goal ?? undefined}
+        badges={<StatusPill tone={live ? "positive" : "neutral"}>{current.status ?? "draft"}</StatusPill>}
+        actions={live
+          ? <Button variant="outline" size="sm" loading={pause.loading} onClick={() => void pause.mutate(undefined)}><Pause className="size-4" />Pause newsletter</Button>
+          : <Button variant="outline" size="sm" onClick={() => setPending("activate")}><Play className="size-4" />Activate newsletter</Button>}
+      >
+        <KeyValueList
+          columns={2}
+          items={[
+            { label: "Name", value: current.name },
+            { label: "Status", value: current.status ?? "draft" },
+            { label: "Goal", value: current.goal || "Not set" },
+            { label: "Slug", value: current.slug || "Not set" },
+            { label: "Audience list", value: current.audience_list_id == null ? "None" : String(current.audience_list_id) },
+            { label: "Newsletter id", value: current.id },
+            { label: "Issues", value: all.length.toLocaleString() },
+            { label: "Sent issues", value: sent.length.toLocaleString() },
+            { label: "Drafts", value: all.filter((i) => isDraft(i)).length.toLocaleString() },
+            { label: "Subscribed people", value: (audience.data ?? 0).toLocaleString() },
+          ]}
+        />
+      </DetailPanel>
+    )
+    : tab === "performance" ? <NewsletterStats key={newsletterId} newsletterId={newsletterId} />
+    : (
+      <SplitView
+        detailOpen={detailOpen}
+        onCloseDetail={closeDetail}
+        expanded={view === "full"}
+        onExpandedChange={(e) => setView(e ? "full" : null)}
+        detailWidth="xl"
+        list={(
+          <div className="grid gap-3">
+            <Toolbar
+              search={{ value: search, onChange: setSearch, placeholder: "Search issues" }}
+              filters={(
+                <select aria-label="Issue status" className={SELECT} value={statusFilter} onChange={(e) => setStatusFilter(e.target.value)}>
+                  <option value="">All statuses</option><option value="draft">Drafts</option><option value="scheduled">Scheduled</option><option value="sending">Sending</option><option value="sent">Sent</option><option value="failed">Failed</option>
+                </select>
+              )}
+              actions={<>{toolbarActions}<Button size="sm" onClick={() => setIssueParam("new")}><Plus className="size-4" />New issue</Button></>}
+            />
+            {issueList}
+          </div>
+        )}
+        detail={detail}
+      />
+    );
+
+  return (
+    <ScreenLayout
+      className={className}
+      title="Newsletter"
+      description="Write, send and measure issues for the people who subscribed."
+      icon={<Mail className="size-5" />}
+      actions={(
+        <>
+          {list.length > 0 ? (
+            <select aria-label="Newsletter" className={SELECT} value={newsletterId} onChange={(e) => pickNewsletter(e.target.value)}>
+              {list.map((n) => <option key={n.id} value={n.id}>{n.name}</option>)}
+            </select>
+          ) : null}
+          {current ? (live
+            ? <Button variant="outline" size="sm" loading={pause.loading} onClick={() => void pause.mutate(undefined)}><Pause className="size-4" />Pause newsletter</Button>
+            : <Button variant="outline" size="sm" onClick={() => setPending("activate")}><Play className="size-4" />Activate newsletter</Button>) : null}
+          <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}
+      activeTab={tab}
+      onTabChange={(id) => { setTabParam(id === "issues" ? null : id); closeDetail(); setOpenedSubscriber(null); }}
+      stats={current ? [
+        { label: "Status", value: current.status ?? "draft", tone: live ? "positive" : "neutral" },
+        { label: "Subscribers", value: audience.loading ? "..." : (audience.data ?? 0).toLocaleString(), hint: "subscribed" },
+        { label: "Issues sent", value: sent.length.toLocaleString() },
+        { label: "Open rate", value: sent.length ? percent(totals.opened, totals.delivered) : "-", hint: "of delivered" },
+        { label: "Click rate", value: sent.length ? percent(totals.clicked, totals.delivered) : "-", hint: "of delivered" },
+      ] : undefined}
+    >
+      {pause.error ? <ApiError error={pause.error} title="Could not pause" /> : null}
+      {body}
+      <FormSheet
+        open={sheet}
+        onOpenChange={(o) => { setSheet(o); if (!o) setPending(null); }}
+        title="New newsletter"
+        description="Creates the container for your issues. Nothing is sent until you activate it."
+        footer={<Button disabled={!name.trim()} onClick={() => setPending("create")}><Send className="size-4" />Create newsletter</Button>}
+      >
+        <div className="grid gap-3">
+          <div><Label htmlFor="g8-nls-name" className="mb-1">Name</Label><Input id="g8-nls-name" value={name} onChange={(e) => setName(e.target.value)} /></div>
+          <div><Label htmlFor="g8-nls-goal" className="mb-1">Goal (optional)</Label><Input id="g8-nls-goal" value={goal} onChange={(e) => setGoal(e.target.value)} /></div>
+        </div>
+      </FormSheet>
+      <ConfirmSpendDialog
+        open={pending !== null}
+        tier="external"
+        title={pending === "activate" ? `Activate ${current?.name ?? "this newsletter"}?` : `Create the newsletter "${name.trim()}"?`}
+        description={<><p>{pending === "activate" ? "Once active, the scheduler sends any issue whose scheduled time has passed to real subscribers. A verified sending domain is required (set it up in graph8)." : "This creates the newsletter container. Nothing is sent until you activate it and send an issue."}</p>{(create.error ?? activate.error) ? <ApiError error={create.error ?? activate.error} title="That did not work" /> : null}</>}
+        confirmLabel={pending === "activate" ? "Activate" : "Create"}
+        confirming={create.loading || activate.loading}
+        onCancel={() => setPending(null)}
+        onConfirm={() => void (pending === "activate" ? activate.mutate(undefined) : create.mutate(undefined))}
+      />
+    </ScreenLayout>
+  );
+}

package/blocks/newsletter/components/subscriber-table.tsx

@@ -28,6 +28,12 @@ export interface SubscriberTableProps {
   /** The newsletter to show. Omit it (for example as a stack nav page) and a newsletter picker is shown instead. */
   newsletterId?: string;
   pageSize?: number;
+  /** When set, the email of a row is a button that opens the full record (see NewsletterScreen). */
+  onOpen?: (subscriber: Subscriber) => void;
+  /** The subscriber whose full record is open; its row is highlighted. */
+  selectedId?: number;
+  /** Bump to re-read the table after the record was changed elsewhere. */
+  refreshKey?: number;
 }
 
 type Action =
@@ -46,7 +52,7 @@ function creditsOf(preview: unknown): number | undefined {
   return typeof value === "number" ? value : undefined;
 }
 
-export function SubscriberTable({ newsletterId: given, pageSize = 25 }: SubscriberTableProps) {
+export function SubscriberTable({ newsletterId: given, pageSize = 25, onOpen, selectedId, refreshKey }: SubscriberTableProps) {
   const [picked, setPicked] = useState("");
   const all = useG8Query((signal) => g8Get<Array<{ id: string; name: string }>>("/newsletters", {}, { signal }).then((r) => r.data ?? []), [], { enabled: !given });
   const newsletterId = given ?? picked;
@@ -61,10 +67,10 @@ export function SubscriberTable({ newsletterId: given, pageSize = 25 }: Subscrib
       </select>
     );
   }
-  return <SubscribersOf newsletterId={newsletterId} pageSize={pageSize} />;
+  return <SubscribersOf newsletterId={newsletterId} pageSize={pageSize} onOpen={onOpen} selectedId={selectedId} refreshKey={refreshKey} />;
 }
 
-function SubscribersOf({ newsletterId, pageSize }: { newsletterId: string; pageSize: number }) {
+function SubscribersOf({ newsletterId, pageSize, onOpen, selectedId, refreshKey }: { newsletterId: string; pageSize: number; onOpen?: (s: Subscriber) => void; selectedId?: number; refreshKey?: number }) {
   const base = `/newsletters/${encodeURIComponent(newsletterId)}/subscribers`;
   const [page, setPage] = useState(1);
   const [search, setSearch] = useState("");
@@ -75,7 +81,7 @@ function SubscribersOf({ newsletterId, pageSize }: { newsletterId: string; pageS
   const [action, setAction] = useState<Action | null>(null);
   const subscribers = useG8Query<Page>(
     (signal) => g8Get<Page>(base, { page, page_size: pageSize, search: query || undefined, status: status || undefined }, { signal }).then((r) => ({ items: r.data?.items ?? [], total: r.data?.total ?? 0 })),
-    [base, page, pageSize, query, status],
+    [base, page, pageSize, query, status, refreshKey],
   );
   const lists = useG8Query((signal) => g8Get<ListOption[]>("/lists", { limit: 200 }, { signal }).then((r) => r.data ?? []), []);
   const preview = useG8Mutation(async () => (await g8Post(`${base}/verify/preview`, {})).data);
@@ -134,8 +140,8 @@ function SubscribersOf({ newsletterId, pageSize }: { newsletterId: string; pageS
           <TableHeader><TableRow><TableHead>Email</TableHead><TableHead>Name</TableHead><TableHead>Status</TableHead><TableHead>Verification</TableHead><TableHead /></TableRow></TableHeader>
           <TableBody>
             {items.map((s) => (
-              <TableRow key={s.id}>
-                <TableCell>{s.email}</TableCell>
+              <TableRow key={s.id} data-state={selectedId === s.id ? "selected" : undefined}>
+                <TableCell>{onOpen ? <button type="button" className="text-left hover:underline" aria-label={`Open ${s.email}`} onClick={() => onOpen(s)}>{s.email}</button> : s.email}</TableCell>
                 <TableCell>{[s.first_name, s.last_name].filter(Boolean).join(" ")}</TableCell>
                 <TableCell>{s.status}</TableCell>
                 <TableCell>{s.verification_status ?? ""}</TableCell>

package/blocks/nurture/README.md

@@ -5,6 +5,17 @@ is a sequence of kind `nurture`: a few emails sent from **one pinned mailbox** t
 contact when they reply. It is not cold outreach (use the `sequencer` block for that). Going live reaches real people,
 so launch is tier `external` and is confirmed with the audience size.
 
+## Screens
+
+`NurtureScreen` (`components/nurture-screen.tsx`) is the finished page: list, create, results, audience, launch and run controls.
+
+```tsx
+import { NurtureScreen } from "@/g8/nurture/components/nurture-screen";
+export default function Page() { return <NurtureScreen />; }
+```
+
+Flows: see every nurture with its state, search and filter, create one (sender mailbox, audience, email steps), open it (deep link `?id=`) to read results, choose the audience and add selected contacts, tick consent and go live (confirmed with the audience size), pause, resume (confirmed), duplicate, edit settings, archive (confirmed). With no connected mailbox the create sheet links out to graph8 (Google and Microsoft sign-in only exists in the app; override with `connectMailboxUrl`). Optional props: `contactIds`, `renderRowActions`, `renderDetailActions`, `extraDetailTabs`, `toolbarActions`.
+
 ## Install
 
 ```
@@ -84,6 +95,7 @@ export default function Page() {
 
 | Component | File | What it is |
 |---|---|---|
+| `NurtureScreen` | `components/nurture-screen.tsx` | The finished page: list, create, results, audience and launch, run controls. |
 | `NurtureBuilder` | `components/nurture-builder.tsx` | List your nurtures; create, edit, pause, resume, duplicate and archive them. |
 | `NurtureForm` | `components/nurture-form.tsx` | Create a nurture (name, sender mailbox, audience, email steps) or edit its settings. |
 | `NurtureEnroll` | `components/nurture-enroll.tsx` | Choose the audience list, attest consent, optionally add selected contacts, and launch with the audience size confirmed. |

package/blocks/nurture/block.json

@@ -29,6 +29,13 @@
     "get_sequence_performance_by_id_analytics_outbound_sequence_performance__sequence_id__get"
   ],
   "components": [
+    {
+      "name": "NurtureScreen",
+      "file": "components/nurture-screen.tsx",
+      "purpose": "Finished nurture workspace: list with state and row actions, create sheet, detail with results, audience and launch, and settings.",
+      "operations": [],
+      "tiers": []
+    },
     {
       "name": "NurtureBuilder",
       "file": "components/nurture-builder.tsx",
@@ -186,6 +193,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }