@graph8/sdk 0.370.0 → 0.373.0

package/blocks/mailboxes/components/connect-mailbox.tsx

@@ -25,6 +25,7 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { DEFAULT_MAILBOX_CREDITS, GRAPH8_APP_MAILBOXES_PATH, listOf, newIdempotencyKey, objectOf } from "../lib/mailboxes-utils";
+import { useProviderDomains } from "../lib/use-provider-domains";
 import type { DomainRow } from "../lib/mailboxes-utils";
 import { plural, pluralWord } from "@/g8/lib/plural";
 import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
@@ -135,7 +136,7 @@ function ImapForm({ onConnected }: { onConnected?: (id: number | string) => void
       </Button>
       {connect.error ? <ApiError error={connect.error} onRetry={connect.reset} /> : null}
       {result ? (
-        <p role="status" className="text-sm text-gray-700">
+        <p role="status" className="text-sm text-foreground">
           {result}
         </p>
       ) : null}
@@ -145,7 +146,7 @@ function ImapForm({ onConnected }: { onConnected?: (id: number | string) => void
 
 function BuyForm({ onPurchased, domainId: initialDomainId }: { onPurchased?: (id: number | string) => void; domainId?: number | string }) {
   const brand = useBrand();
-  const domains = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 100 }, { signal }), []);
+  const domains = useProviderDomains([]);
   const pricing = useG8Query((signal) => g8Get("/provider-domains/pricing", undefined, { signal }), []);
   const [domainId, setDomainId] = useState(initialDomainId != null ? String(initialDomainId) : "");
   const [usernames, setUsernames] = useState("");
@@ -170,19 +171,19 @@ function BuyForm({ onPurchased, domainId: initialDomainId }: { onPurchased?: (id
     setDone(`Accepted ${plural(Number(res.count ?? names.length), "mailbox", "mailboxes")}; provisioning continues in the background.`);
     onPurchased?.(domainId);
   });
-  const connected = listOf<DomainRow>(domains.data).filter((d) => d.provider_connected);
+  const connected = domains.items.filter((d) => d.provider_connected);
   const ready = domainId && names.length > 0 && person.first_name.trim() && person.last_name.trim();
 
   return (
     <div className="space-y-3">
       {domains.error ? <ApiError error={domains.error} onRetry={() => void domains.refetch()} /> : null}
       {!domains.loading && connected.length === 0 ? (
-        <p className="text-sm text-gray-600">No connected domain yet. Buy and connect one with DomainPurchase first.</p>
+        <p className="text-sm text-muted-foreground">No connected domain yet. Buy and connect one with DomainPurchase first.</p>
       ) : (
         <div className="grid gap-2 sm:grid-cols-2">
           <select
             aria-label="Domain"
-            className="h-9 rounded-md border border-gray-300 px-2 text-sm"
+            className="h-9 rounded-md border border-input px-2 text-sm"
             value={domainId}
             onChange={(e) => setDomainId(e.target.value)}
           >
@@ -195,7 +196,7 @@ function BuyForm({ onPurchased, domainId: initialDomainId }: { onPurchased?: (id
           </select>
           <select
             aria-label="Platform"
-            className="h-9 rounded-md border border-gray-300 px-2 text-sm"
+            className="h-9 rounded-md border border-input px-2 text-sm"
             value={platform}
             onChange={(e) => setPlatform(e.target.value as "GOOGLE" | "MICROSOFT")}
           >
@@ -231,7 +232,7 @@ function BuyForm({ onPurchased, domainId: initialDomainId }: { onPurchased?: (id
       </Button>
       {buy.error ? <ApiError error={buy.error} onRetry={buy.reset} /> : null}
       {done ? (
-        <p role="status" className="text-sm text-green-700">
+        <p role="status" className="text-sm text-positive-foreground">
           {done}
         </p>
       ) : null}
@@ -276,7 +277,7 @@ export function ConnectMailbox({ appUrl: appUrlProp, onConnected, onPurchased, i
       </div>
       {mode === "imap" ? <ImapForm onConnected={onConnected} /> : null}
       {mode === "oauth" ? (
-        <div className="space-y-2 rounded border border-gray-200 p-3 text-sm">
+        <div className="space-y-2 rounded border border-border p-3 text-sm">
           <p>
             Google and Microsoft mailboxes connect through a sign-in screen that only runs inside the {brand.linkLabel} app. Connect it there, then
             come back: it appears in your mailbox list.

package/blocks/mailboxes/components/domain-detail.tsx

@@ -18,6 +18,7 @@ import { useState } from "react";
 import type { ReactNode } from "react";
 import { Button, Skeleton } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
+import { FirstNotice } from "@/g8/components/paging-notices";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { DetailPanel } from "@/g8/components/screen/detail-panel";
 import { KeyValueList } from "@/g8/components/screen/key-value-list";
@@ -27,6 +28,7 @@ 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 { fieldItems, listOf, objectOf } from "../lib/mailboxes-utils";
+import { useProviderDomains } from "../lib/use-provider-domains";
 import type { DomainRow, MailboxRow } from "../lib/mailboxes-utils";
 
 export interface DomainDetailProps {
@@ -46,13 +48,16 @@ export interface DomainDetailProps {
 
 type Pending = "connect" | "propagation";
 
+/** The mailboxes API has no paging: a full read is announced where the mailboxes are listed. */
+const MAILBOX_LIMIT = 200;
+
 export function DomainDetail({ domainId, onClose, onExpand, onCollapse, onChanged, onBuyMailboxes, onOpenMailbox, renderActions, className }: DomainDetailProps) {
   const [pending, setPending] = useState<Pending | null>(null);
   const [note, setNote] = useState<string | null>(null);
-  const domains = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 100 }, { signal }), [domainId]);
-  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: 200 }, { signal }), [domainId]);
+  const domains = useProviderDomains([domainId]);
+  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: MAILBOX_LIMIT }, { signal }), [domainId]);
 
-  const row = listOf<DomainRow>(domains.data).find((d) => String(d.id) === String(domainId));
+  const row = domains.items.find((d) => String(d.id) === String(domainId));
   const run = useG8Mutation(async (p: Pending) => {
     if (p === "connect") {
       await g8Post(`/provider-domains/${domainId}/connect-provider`, {});
@@ -67,7 +72,7 @@ export function DomainDetail({ domainId, onClose, onExpand, onCollapse, onChange
   }, { onError: () => setPending(null) });
 
   if (domains.error) return <ApiError error={domains.error} title="Could not load the domain" onRetry={() => void domains.refetch()} className={className} />;
-  if (domains.loading && !domains.data) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
+  if (domains.loading && !domains.loaded) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
   if (!row) return <p className={`p-4 text-sm ${className ?? ""}`}>This domain no longer exists.</p>;
 
   const onDomain = listOf<MailboxRow>(mailboxes.data).filter((m) => (m.email ?? "").toLowerCase().endsWith(`@${row.domain.toLowerCase()}`));
@@ -133,6 +138,7 @@ export function DomainDetail({ domainId, onClose, onExpand, onCollapse, onChange
                   ))}
                 </ul>
               )}
+              <FirstNotice shown={listOf<MailboxRow>(mailboxes.data).length} limit={MAILBOX_LIMIT} noun="mailboxes" />
             </SectionCard>
           ),
         },

package/blocks/mailboxes/components/domain-purchase.tsx

@@ -24,9 +24,11 @@ import { g8Get, g8Post } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
+import { FirstNotice } from "@/g8/components/paging-notices";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
 import { DEFAULT_DOMAIN_CREDITS, listOf, newIdempotencyKey, objectOf, statusClass } from "../lib/mailboxes-utils";
+import { useProviderDomains } from "../lib/use-provider-domains";
 import type { DomainRow } from "../lib/mailboxes-utils";
 import { plural } from "@/g8/lib/plural";
 import { useBrand } from "@/g8/hooks/use-brand";
@@ -66,7 +68,7 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
   const [note, setNote] = useState<string | null>(null);
   const idemKey = useRef<{ sig: string; key: string } | null>(null);
 
-  const domains = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 50 }, { signal }), []);
+  const domains = useProviderDomains([]);
   const suggest = useG8Mutation(async () => {
     setNames(suggestionsOf(await g8Post("/provider-domains/generate-domains", { keyword: keyword.trim(), count: 10 })));
     setSelected([]);
@@ -106,7 +108,7 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
   const toggle = (d: string) => setSelected((s) => (s.includes(d) ? s.filter((x) => x !== d) : [...s, d]));
   const buyable = selected.filter((d) => avail[d]?.available);
   const contactOk = contact.first_name.trim() && contact.last_name.trim() && /\S+@\S+/.test(contact.email);
-  const rows = listOf<DomainRow>(domains.data);
+  const rows = domains.items;
 
   const dialog = (() => {
     if (!pending) return null;
@@ -141,8 +143,8 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
 
   return (
     <div className={`space-y-5 ${className ?? ""}`}>
-      <section className="space-y-2 rounded border border-gray-200 p-3">
-        <h3 className="text-sm font-semibold">Find a domain</h3>
+      <section className="space-y-2 rounded border border-border p-3">
+        <h3 className="text-sm font-medium">Find a domain</h3>
         <form
           className="flex gap-2"
           onSubmit={(e) => {
@@ -165,7 +167,7 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
                   {d}
                   {avail[d] ? (
                     <span
-                      className={`rounded px-1.5 text-xs ${avail[d].available ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}`}
+                      className={`rounded px-1.5 text-xs ${avail[d].available ? "bg-positive text-positive-foreground" : "bg-error text-error-foreground"}`}
                     >
                       {avail[d].available
                         ? `available${avail[d].price != null ? ` ${avail[d].price}` : ""}`
@@ -189,8 +191,8 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
         </Button>
       </section>
 
-      <section className="space-y-2 rounded border border-gray-200 p-3">
-        <h3 className="text-sm font-semibold">Registrant</h3>
+      <section className="space-y-2 rounded border border-border p-3">
+        <h3 className="text-sm font-medium">Registrant</h3>
         <div className="grid gap-2 sm:grid-cols-3">
           <Input
             aria-label="First name"
@@ -217,7 +219,7 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
       </section>
 
       {note ? (
-        <p role="status" className="text-sm text-gray-700">
+        <p role="status" className="text-sm text-foreground">
           {note}
         </p>
       ) : null}
@@ -226,18 +228,18 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
       <section aria-label="Your domains">
         {domains.error ? (
           <ApiError error={domains.error} onRetry={() => void domains.refetch()} />
-        ) : domains.loading && !domains.data ? (
+        ) : domains.loading && !domains.loaded ? (
           <Skeleton className="h-16 w-full" />
         ) : rows.length === 0 ? (
           <EmptyState title="No sending domains yet" description={`Buy one above, or add a domain you already own in the ${brand.linkLabel} app.`} />
         ) : (
-          <ul className="divide-y rounded border border-gray-200">
+          <ul className="divide-y rounded border border-border">
             {rows.map((d) => (
               <li key={d.id} className="flex flex-wrap items-center justify-between gap-2 px-3 py-2 text-sm">
                 <span>
                   <span className="font-medium">{d.domain}</span>{" "}
                   <span className={`rounded px-1.5 text-xs ${statusClass(d.status)}`}>{d.status ?? "unknown"}</span>{" "}
-                  <span className="text-xs text-gray-500">{d.mailbox_count ?? 0} mailboxes</span>
+                  <span className="text-xs text-muted-foreground">{d.mailbox_count ?? 0} mailboxes</span>
                 </span>
                 <span className="flex gap-1">
                   {!d.provider_connected && !d.is_external ? (
@@ -254,6 +256,7 @@ export function DomainPurchase({ onPurchased, className }: DomainPurchaseProps)
             ))}
           </ul>
         )}
+        <FirstNotice shown={rows.length} limit={rows.length} force={domains.truncated} noun="domains" />
       </section>
 
       {pending && dialog ? (

package/blocks/mailboxes/components/mailbox-detail.tsx

@@ -29,6 +29,7 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
 import { fieldItems, listOf, objectOf } from "../lib/mailboxes-utils";
+import { useProviderDomains } from "../lib/use-provider-domains";
 import type { DomainRow, MailboxRow } from "../lib/mailboxes-utils";
 import { WarmupHealth } from "./warmup-health";
 import { useBrand } from "@/g8/hooks/use-brand";
@@ -59,7 +60,7 @@ export function MailboxDetail({ mailboxId, tab, onTabChange, onClose, onExpand,
   const [pending, setPending] = useState<Pending | null>(null);
   const [testNote, setTestNote] = useState<string | null>(null);
   const q = useG8Query((signal) => g8Get(`/mailboxes/${mailboxId}`, undefined, { signal }), [mailboxId]);
-  const domains = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 100 }, { signal }), []);
+  const domains = useProviderDomains([]);
 
   const test = useG8Mutation(async () => {
     const r = objectOf(await g8Post(`/mailboxes/${mailboxId}/test-connection`, {})) as TestResult;
@@ -84,7 +85,7 @@ export function MailboxDetail({ mailboxId, tab, onTabChange, onClose, onExpand,
   const raw = objectOf(q.data);
   const m = { id: String(mailboxId), email: null, ...raw } as MailboxRow;
   const domain = (m.email ?? "").split("@")[1]?.toLowerCase();
-  const domainRow = listOf<DomainRow>(domains.data).find((d) => d.domain?.toLowerCase() === domain);
+  const domainRow = domains.items.find((d) => d.domain?.toLowerCase() === domain);
   const status = m.connection_status ?? "unknown";
   const name = m.email ?? `Mailbox ${mailboxId}`;
 

package/blocks/mailboxes/components/mailbox-list.tsx

@@ -22,9 +22,13 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
+import { FirstNotice } from "@/g8/components/paging-notices";
 import { listOf, objectOf, statusClass } from "../lib/mailboxes-utils";
 import type { MailboxRow } from "../lib/mailboxes-utils";
 
+/** The read cap. The mailboxes API has no paging, so a full read is announced ("Showing the first 200"). */
+const MAILBOX_LIMIT = 200;
+
 export interface MailboxListProps {
   includeArchived?: boolean;
   /** Called when a row is opened (for example to show WarmupHealth for it). */
@@ -47,7 +51,7 @@ export function MailboxList({ includeArchived = false, onSelect, emptyAction, cl
   const [tests, setTests] = useState<Record<string, string>>({});
   const [testing, setTesting] = useState<ReadonlySet<string>>(new Set());
   const list = useG8Query(
-    (signal) => g8Get("/mailboxes", { limit: 200, include_archived: includeArchived }, { signal }),
+    (signal) => g8Get("/mailboxes", { limit: MAILBOX_LIMIT, include_archived: includeArchived }, { signal }),
     [includeArchived],
   );
 
@@ -114,13 +118,13 @@ export function MailboxList({ includeArchived = false, onSelect, emptyAction, cl
                 <button type="button" className="text-left font-medium hover:underline" onClick={() => onSelect?.(m)}>
                   {m.email ?? `Mailbox ${m.id}`}
                 </button>
-                <div className="text-xs text-gray-500">
+                <div className="text-xs text-muted-foreground">
                   {m.display_name ?? ""}
                   {m.provider ? ` - ${m.provider}` : ""}
                   {m.is_archived ? " - archived" : ""}
                 </div>
                 {tests[m.id] ? (
-                  <div role="status" className="text-xs text-gray-700">
+                  <div role="status" className="text-xs text-foreground">
                     {tests[m.id]}
                   </div>
                 ) : null}
@@ -163,6 +167,7 @@ export function MailboxList({ includeArchived = false, onSelect, emptyAction, cl
           ))}
         </TableBody>
       </Table>
+      <FirstNotice shown={rows.length} limit={MAILBOX_LIMIT} noun="mailboxes" />
       {pending ? (
         <ConfirmSpendDialog
           open

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

@@ -38,7 +38,9 @@ import { useUrlState } from "@/g8/hooks/use-url-state";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { g8Get } from "@/g8/lib/g8-client";
 import { listOf, objectOf } from "../lib/mailboxes-utils";
+import { useProviderDomains } from "../lib/use-provider-domains";
 import type { DomainRow, MailboxRow } from "../lib/mailboxes-utils";
+import { FirstNotice } from "@/g8/components/paging-notices";
 import { ConnectMailbox } from "./connect-mailbox";
 import { DomainPurchase } from "./domain-purchase";
 import { DomainDetail } from "./domain-detail";
@@ -83,11 +85,12 @@ export function fleetStats(summary: Record<string, unknown>): StatItem[] {
 }
 
 function DomainList({ version, selectedId, onOpen }: { version: number; selectedId: string; onOpen: (d: DomainRow) => void }) {
-  const q = useG8Query((signal) => g8Get("/provider-domains", { page: 1, limit: 100 }, { signal }), [version]);
-  const rows = listOf<DomainRow>(q.data);
-  if (q.loading && !q.data) return <Skeleton className="h-24 w-full" />;
+  const q = useProviderDomains([version]);
+  const rows = q.items;
+  if (q.loading && !q.loaded) return <Skeleton className="h-24 w-full" />;
   if (rows.length === 0) return null;
   return (
+    <>
     <ul aria-label="Your domains" className="divide-y rounded-md border">
       {rows.map((d) => (
         <li key={d.id} className={`flex items-center justify-between px-3 py-2 text-sm ${String(d.id) === selectedId ? "bg-muted" : ""}`}>
@@ -99,6 +102,8 @@ function DomainList({ version, selectedId, onOpen }: { version: number; selected
         </li>
       ))}
     </ul>
+    <FirstNotice shown={rows.length} limit={rows.length} force={q.truncated} noun="domains" />
+    </>
   );
 }
 

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.