@graph8/sdk 0.370.0 → 0.374.0

package/blocks/appointments/components/booking-page.tsx

@@ -98,7 +98,7 @@ export function BookingPage({ eventTypeId, daysAhead = 14, timeZone, defaultAtte
   if (book.data) {
     return (
       <div className={`space-y-2 rounded-lg border p-4 ${className ?? ""}`} role="status">
-        <h2 className="text-base font-semibold">You are booked</h2>
+        <h2 className="text-base font-medium">You are booked</h2>
         <p className="text-sm">
           {eventType.data?.title ?? "Meeting"} on {formatDateTime(bookedAt ?? slot?.time, zone)}. A calendar invite was sent to {email}.
         </p>
@@ -116,7 +116,7 @@ export function BookingPage({ eventTypeId, daysAhead = 14, timeZone, defaultAtte
   return (
     <div className={`space-y-4 ${className ?? ""}`}>
       <header>
-        <h2 className="text-base font-semibold">{eventType.data?.title ?? "Book a meeting"}</h2>
+        <h2 className="text-base font-medium">{eventType.data?.title ?? "Book a meeting"}</h2>
         <p className="text-sm text-muted-foreground">
           {eventType.data ? `${eventType.data.length} minutes · ` : ""}times shown in {zone}
         </p>

package/blocks/appointments/components/meeting-contact-links.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+/**
+ * MeetingContactLinks: "Open <attendee>" buttons for a booked or recorded meeting, one per attendee (at most three)
+ * who is a contact in your CRM. Use it in MeetingsScreen's `renderDetailActions`:
+ *   renderDetailActions={(selection) => <MeetingContactLinks selection={selection} onOpenContact={(id) => router.push(`/contacts?id=${id}`)} />}
+ *
+ * SDK operations, in order:
+ *   1. getBooking          GET /appointments/bookings/{uid}   (read)   for a booking
+ *      getMeeting          GET /inbox/meetings/{id}           (read)   for a recorded meeting
+ *   2. listContacts        GET /contacts?email=               (read)   once per attendee, via the crm ContactLookupLink
+ * Nothing here is billable, external or destructive.
+ */
+
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { ContactLookupLink } from "@/g8/crm/components/contact-lookup-link";
+import { unwrap } from "../lib/appointments-types";
+import type { MeetingSelection } from "./meeting-list";
+
+interface Attendee { email?: string | null; name?: string | null }
+
+export interface MeetingContactLinksProps {
+  selection: MeetingSelection;
+  /** Route to the contact in your contacts screen. */
+  onOpenContact: (contactId: number) => void;
+}
+
+export function MeetingContactLinks({ selection, onOpenContact }: MeetingContactLinksProps) {
+  const { kind, id } = selection;
+  const q = useG8Query(async (signal) => {
+    const path = kind === "booking" ? `/appointments/bookings/${encodeURIComponent(id)}` : `/inbox/meetings/${encodeURIComponent(id)}`;
+    return unwrap<{ attendees?: Attendee[] | null }>(await g8Get(path, undefined, { signal })).attendees ?? [];
+  }, [kind, id]);
+  const seen = new Set<string>();
+  const people = (q.data ?? []).filter((a) => {
+    const email = a.email?.trim().toLowerCase();
+    if (!email || seen.has(email)) return false;
+    seen.add(email);
+    return true;
+  }).slice(0, 3);
+  return (
+    <>
+      {people.map((a) => (
+        <ContactLookupLink key={a.email} email={a.email} label={`Open ${a.name || a.email}`} onOpen={onOpenContact} />
+      ))}
+    </>
+  );
+}

package/blocks/appointments/components/meeting-detail.tsx

@@ -48,7 +48,7 @@ function RecordedDetail({ id, className }: { id: string; className?: string }) {
   const m = q.data;
   return (
     <section className={`space-y-3 ${className ?? ""}`}>
-      <h2 className="text-base font-semibold">{m.subject || "Untitled meeting"}</h2>
+      <h2 className="text-base font-medium">{m.subject || "Untitled meeting"}</h2>
       <dl className="grid gap-3 sm:grid-cols-2">
         <Field label="When">{formatDateTime(m.start_time)}</Field>
         <Field label="Attendees">{(m.attendees ?? []).map((a) => a.name || a.email).join(", ") || "Unknown"}</Field>
@@ -94,7 +94,7 @@ function BookingDetail({ uid, onChanged, className }: { uid: string; onChanged?:
 
   return (
     <section className={`space-y-4 ${className ?? ""}`}>
-      <h2 className="text-base font-semibold">{b.title || b.event_type_title || "Meeting"}</h2>
+      <h2 className="text-base font-medium">{b.title || b.event_type_title || "Meeting"}</h2>
       <dl className="grid gap-3 sm:grid-cols-2">
         <Field label="When">{formatDateTime(b.start_time)}</Field>
         <Field label="Status"><span className="capitalize">{b.status}</span></Field>

package/blocks/appointments/components/meeting-list.tsx

@@ -18,6 +18,8 @@ import { ApiError } from "@/g8/components/api-error";
 import { EmptyState } from "@/g8/components/empty-state";
 import { g8Get } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlFilters } from "@/g8/hooks/use-url-filters";
+import { SelectFilter, TextFilter } from "@/g8/components/screen/filter-controls";
 import { formatDateTime, listOf, type Booking, type RecordedMeeting } from "../lib/appointments-types";
 import { rowActivationProps } from "@/g8/hooks/use-row-activation";
 import { RecordLink } from "@/g8/components/screen/record-link";
@@ -45,8 +47,8 @@ const VIEWS: ReadonlyArray<{ value: MeetingView; label: string }> = [
   { value: "recorded", label: "Recorded" },
 ];
 
-function bookingQuery(view: Exclude<MeetingView, "recorded">, now: string, page: number, take: number) {
-  const base = { skip: page * take, take };
+function bookingQuery(view: Exclude<MeetingView, "recorded">, now: string, page: number, take: number, attendeeEmail?: string) {
+  const base = { skip: page * take, take, attendee_email: attendeeEmail || undefined };
   if (view === "upcoming") return { ...base, after_start: now, sort_by: "start_time", sort_order: "asc" };
   if (view === "past") return { ...base, before_end: now, sort_by: "start_time", sort_order: "desc" };
   return { ...base, status: "cancelled", sort_by: "start_time", sort_order: "desc" };
@@ -56,36 +58,38 @@ function attendeeNames(b: Booking): string {
   return b.attendees.map((a) => a.name || a.email).join(", ") || "No attendees";
 }
 
-function useDebouncedText(value: string, ms = 300): string {
-  const [v, setV] = useState(value);
-  useEffect(() => { const t = setTimeout(() => setV(value.trim()), ms); return () => clearTimeout(t); }, [value, ms]);
-  return v;
-}
+/** Every filter the meetings (/inbox/meetings) and bookings APIs take besides the view tab. */
+const MEETING_FILTERS = ["search", "participant_email", "timeframe", "has_transcript", "attendee_email"] as const;
 
 export function MeetingList({ linkParam, onSelect, initialView = "upcoming", pageSize = 20, refreshKey, selectedId, className }: MeetingListProps) {
   const [view, setView] = useState<MeetingView>(initialView);
   const [page, setPage] = useState(0);
-  const [search, setSearch] = useState("");
-  const query = useDebouncedText(search);
+  // Every filter the meetings and bookings APIs take lives in the URL (`m_participant_email=...`).
+  const uf = useUrlFilters(MEETING_FILTERS, { prefix: "m_" });
+  const search = uf.draft.search;
+  const query = uf.filters.search.trim();
+  const { participant_email, timeframe, has_transcript, attendee_email } = uf.filters;
   const now = useMemo(() => new Date().toISOString(), [view]); // eslint-disable-line react-hooks/exhaustive-deps
 
   const rows = useG8Query(
     async (signal) => {
       if (view === "recorded") {
-        const env = await g8Get("/inbox/meetings", { search: query || undefined, page: page + 1, page_size: pageSize }, { signal });
+        const env = await g8Get("/inbox/meetings", { search: query || undefined, participant_email: participant_email ? participant_email.split(",").map((e) => e.trim()).filter(Boolean) : undefined, timeframe: timeframe || undefined, has_transcript: has_transcript ? has_transcript === "yes" : undefined, page: page + 1, page_size: pageSize }, { signal });
         return { kind: "meeting" as const, items: listOf<RecordedMeeting>(env), more: Boolean((env as { pagination?: { has_next?: boolean } }).pagination?.has_next) };
       }
-      const env = await g8Get("/appointments/bookings", bookingQuery(view, now, page, pageSize), { signal });
+      const env = await g8Get("/appointments/bookings", bookingQuery(view, now, page, pageSize, attendee_email.trim()), { signal });
       const items = listOf<Booking>(env, "bookings");
       return { kind: "booking" as const, items, more: items.length === pageSize };
     },
-    [view, page, query, pageSize, now, refreshKey],
+    [view, page, query, participant_email, timeframe, has_transcript, attendee_email, pageSize, now, refreshKey],
+    { enabled: uf.ready },
   );
 
   const switchView = (next: MeetingView) => {
     setView(next);
     setPage(0);
   };
+  useEffect(() => { setPage(0); }, [query, participant_email, timeframe, has_transcript, attendee_email]);
   const result = rows.data;
 
   return (
@@ -98,7 +102,19 @@ export function MeetingList({ linkParam, onSelect, initialView = "upcoming", pag
             </Button>
           ))}
         </div>
-        {view === "recorded" ? <Input aria-label="Search meetings" className="w-56" placeholder="Search recorded meetings" value={search} onChange={(e) => { setSearch(e.target.value); setPage(0); }} /> : null}
+        {view === "recorded" ? <Input aria-label="Search meetings" className="w-56" placeholder="Search recorded meetings" value={search} onChange={(e) => uf.set("search", e.target.value)} /> : null}
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        {view === "recorded" ? (
+          <>
+            <TextFilter label="participant email" placeholder="Participant email" type="email" value={uf.draft.participant_email} onChange={(v) => uf.set("participant_email", v)} className="w-52" />
+            <SelectFilter label="timeframe" any="Past (default)" value={uf.draft.timeframe} onChange={(v) => uf.set("timeframe", v)} options={[{ value: "upcoming", label: "Upcoming" }, { value: "all", label: "All" }]} />
+            <SelectFilter label="transcript" any="With or without transcript" value={uf.draft.has_transcript} onChange={(v) => uf.set("has_transcript", v)} options={[{ value: "yes", label: "Has a transcript" }, { value: "no", label: "No transcript" }]} />
+          </>
+        ) : (
+          <TextFilter label="attendee email" placeholder="Attendee email" type="email" value={uf.draft.attendee_email} onChange={(v) => uf.set("attendee_email", v)} className="w-52" />
+        )}
+        {uf.active ? <Button size="sm" variant="ghost" onClick={uf.clear}>Clear filters</Button> : null}
       </div>
 
       {rows.error ? (

package/blocks/appointments/components/record-meetings-tab.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+/**
+ * RecordMeetingsTab: the meetings booked with one contact, past and upcoming, newest first, each opening in the meetings
+ * screen. Use it as an `extraDetailTabs` entry of ContactsScreen:
+ *   { id: "meetings", label: "Meetings", render: (c) => <RecordMeetingsTab contactId={c.id} onOpenMeeting={(sel) => router.push(`/meetings?sel=${sel}`)} /> }
+ *
+ * SDK operations, in order:
+ *   1. getContactMeetings  GET /contacts/{id}/meetings   (read; booking events, the API answers the 50 most recent)
+ * Nothing here is billable, external or destructive. Book a new meeting from the scheduling screen.
+ */
+
+import { Skeleton } from "@graph8/sdk/ui";
+import { CalendarDays } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import type { Tone } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { listOf } from "../lib/appointments-types";
+
+/** One row of GET /contacts/{id}/meetings: a booking event. */
+interface BookingEvent { event?: string | null; timestamp?: string | null; booking_id?: string | null; title?: string | null; start_time?: string | null; end_time?: string | null; attendees?: unknown }
+
+/** The server returns at most this many events, newest first. */
+export const MEETINGS_TAB_API_LIMIT = 50;
+
+const EVENT: Record<string, { label: string; tone: Tone }> = {
+  "appointments.booking_created": { label: "Booked", tone: "info" },
+  "appointments.booking_rescheduled": { label: "Rescheduled", tone: "warning" },
+  "appointments.booking_cancelled": { label: "Cancelled", tone: "negative" },
+};
+
+function when(iso: string | null | undefined): string {
+  const d = iso ? new Date(iso) : null;
+  return d && !Number.isNaN(d.getTime()) ? d.toLocaleString(undefined, { month: "short", day: "numeric", year: "numeric", hour: "numeric", minute: "2-digit" }) : "";
+}
+
+function attendeeNames(a: unknown): string {
+  if (!Array.isArray(a)) return "";
+  return a.map((x) => (typeof x === "string" ? x : ((x as { name?: string; email?: string } | null)?.name || (x as { email?: string } | null)?.email || ""))).filter(Boolean).join(", ");
+}
+
+export interface RecordMeetingsTabProps {
+  contactId: number;
+  /** Route to the booking in your meetings screen; receives the `sel` value ("booking:<id>"). Without it the rows link to `${meetingsPath}?sel=booking:<id>`. */
+  onOpenMeeting?: (selection: string) => void;
+  /** Path of your meetings screen for the plain links. Default "/meetings". */
+  meetingsPath?: string;
+}
+
+export function RecordMeetingsTab({ contactId, onOpenMeeting, meetingsPath = "/meetings" }: RecordMeetingsTabProps) {
+  const q = useG8Query(async (signal) => listOf<BookingEvent>(await g8Get(`/contacts/${contactId}/meetings`, undefined, { signal }), "items"), [contactId]);
+  if (q.error) return <ApiError error={q.error} title="Could not load meetings" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading meetings" />;
+  if (q.data.length === 0) return <EmptyState compact icon={<CalendarDays className="size-8" />} title="No meetings yet" description="Meetings booked with this contact show up here." />;
+  return (
+    <div className="space-y-2">
+      <ul className="divide-y rounded-md border" aria-label="Meetings">
+        {q.data.map((m, i) => {
+          const kind = EVENT[m.event ?? ""] ?? { label: "Booking", tone: "neutral" as Tone };
+          const selection = m.booking_id ? `booking:${m.booking_id}` : null;
+          const title = m.title || "Meeting";
+          const detail = [when(m.start_time ?? m.timestamp), attendeeNames(m.attendees)].filter(Boolean).join(" · ");
+          return (
+            <li key={`${m.booking_id ?? "event"}-${m.event}-${i}`} className="flex items-center justify-between gap-3 p-3 text-sm">
+              <div className="min-w-0">
+                {selection ? (
+                  <a
+                    href={`${meetingsPath}?sel=${encodeURIComponent(selection)}`}
+                    className="block truncate font-medium hover:underline"
+                    onClick={(e) => {
+                      if (!onOpenMeeting || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+                      e.preventDefault();
+                      onOpenMeeting(selection);
+                    }}
+                  >
+                    {title}
+                  </a>
+                ) : <span className="font-medium">{title}</span>}
+                {detail ? <p className="truncate text-xs text-muted-foreground">{detail}</p> : null}
+              </div>
+              <StatusPill tone={kind.tone} dot>{kind.label}</StatusPill>
+            </li>
+          );
+        })}
+      </ul>
+      {q.data.length >= MEETINGS_TAB_API_LIMIT ? <p role="note" className="text-xs text-muted-foreground">Showing the {MEETINGS_TAB_API_LIMIT} most recent booking events. Older ones are in the meetings screen.</p> : null}
+    </div>
+  );
+}

package/blocks/campaigns/README.md

@@ -18,7 +18,7 @@ deep-linkable (`?tab=campaigns|profile|personas`, `?id=` the record, `?dtab=` th
 - **Company profile tab**: the profile plus ICPs; `IcpDetail` shows every field and edits, pins or archives.
 - **Personas tab**: `PersonaDetail` shows every field, the campaigns that target it, and edits, pins or archives.
 
-Slot props: `toolbarActions`, `renderDetailActions(campaign)`, `extraDetailTabs`, `websiteUrl`. Prerequisites: a
+Slot props: `toolbarActions`, `renderDetailActions(campaign)`, `extraDetailTabs`, `websiteUrl`. `CampaignLinksTab` (`components/campaign-links.tsx`) is a ready `extraDetailTabs` entry: the campaign's landing pages, workflows and newsletters, each opening in your app (`onOpenLandingPage`, `onOpenWorkflow`, `onOpenNewsletter`), with link and unlink for landing pages and newsletters and unlink only for workflows (the API has no link operation for them; a newsletter that belongs to another campaign is not offered, because linking moves it). Prerequisites: a
 company profile with the real website, an active mailbox, a contact list, and credits for AI generation.
 `IcpEditor` and `PersonaEditor` gained optional `onOpen` and `refreshKey`; `CampaignAssets` optional
 `documentId` and `onDocumentChange`.

package/blocks/campaigns/block.json

@@ -42,16 +42,25 @@
     "get_persona_personas__persona_id__get",
     "get_safe_to_send_deliverability_safe_to_send_get",
     "launch_campaign_campaigns__campaign_id__launch_post",
+    "link_landing_page_to_campaign_campaigns__campaign_id__landing_pages_post",
+    "link_newsletter_campaign_newsletters__newsletter_id__campaign_put",
     "list_campaign_documents_campaigns__campaign_id__documents_get",
+    "list_campaign_landing_pages_campaigns__campaign_id__landing_pages_get",
+    "list_campaign_workflows_campaigns__campaign_id__workflows_get",
     "list_campaigns_campaigns_get",
     "list_campaigns_for_picker_campaigns_picker_get",
     "list_icps_icps_get",
+    "list_landing_pages_landing_pages_get",
     "list_mailboxes_mailboxes_get",
+    "list_newsletters_newsletters_get",
     "list_personas_personas_get",
     "pin_icp_icps__icp_id__pin_post",
     "pin_persona_personas__persona_id__pin_post",
     "recommend_campaign_personas_campaigns_recommend_personas_post",
     "regenerate_campaign_document_campaigns__campaign_id__documents__document_id__regenerate_post",
+    "unlink_campaign_workflow_campaigns__campaign_id__workflows__link_id__delete",
+    "unlink_landing_page_from_campaign_campaigns__campaign_id__landing_pages__landing_page_id__delete",
+    "unlink_newsletter_campaign_newsletters__newsletter_id__campaign_delete",
     "unpin_icp_icps__icp_id__unpin_post",
     "unpin_persona_personas__persona_id__unpin_post",
     "update_campaign_campaigns__campaign_id__patch",
@@ -307,6 +316,27 @@
         "write",
         "destructive"
       ]
+    },
+    {
+      "name": "CampaignLinksTab",
+      "file": "components/campaign-links.tsx",
+      "purpose": "The landing pages, workflows and newsletters tied to one campaign: each row opens the record in your app, landing pages and newsletters can be linked and unlinked (workflows only unlinked, the API has no link operation). Use as an extraDetailTabs entry of CampaignsScreen.",
+      "operations": [
+        "list_campaign_landing_pages_campaigns__campaign_id__landing_pages_get",
+        "link_landing_page_to_campaign_campaigns__campaign_id__landing_pages_post",
+        "unlink_landing_page_from_campaign_campaigns__campaign_id__landing_pages__landing_page_id__delete",
+        "list_landing_pages_landing_pages_get",
+        "list_campaign_workflows_campaigns__campaign_id__workflows_get",
+        "unlink_campaign_workflow_campaigns__campaign_id__workflows__link_id__delete",
+        "list_newsletters_newsletters_get",
+        "link_newsletter_campaign_newsletters__newsletter_id__campaign_put",
+        "unlink_newsletter_campaign_newsletters__newsletter_id__campaign_delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
     }
   ],
   "hooks": [
@@ -378,7 +408,10 @@
     "campaigns:launch",
     "campaigns:read",
     "campaigns:run",
-    "campaigns:write"
+    "campaigns:write",
+    "newsletter:delete",
+    "newsletter:read",
+    "newsletter:write"
   ],
   "defaults": [
     {

package/blocks/campaigns/components/campaign-assets.tsx

@@ -86,7 +86,7 @@ function Editor({ campaignId, doc, onChanged, onClosed }: { campaignId: string;
       {full.data ? (
         <>
           <Textarea aria-label="Document content" className="min-h-48 font-mono text-sm" value={body} onChange={(e) => setContent(e.target.value)} />
-          {tooBig ? <p role="alert" className="text-sm text-red-700">This document is over 5 MiB and cannot be saved through the proxy.</p> : null}
+          {tooBig ? <p role="alert" className="text-sm text-error-foreground">This document is over 5 MiB and cannot be saved through the proxy.</p> : null}
           <div className="flex gap-2">
             <Button disabled={content === null || tooBig || poll.polling} onClick={() => setPending({ kind: "save" })}>Save changes</Button>
             <Button variant="outline" disabled={poll.polling} onClick={() => setPending({ kind: "regenerate" })}>Rewrite with AI</Button>

package/blocks/campaigns/components/campaign-launch-step.tsx

@@ -34,6 +34,7 @@
 import { useEffect, useState } 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 { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
@@ -55,7 +56,7 @@ interface Mailbox { id: string | number; email?: string | null; connection_statu
 
 function Check({ ok, children, detail }: { ok: boolean | undefined; children: string; detail?: string }) {
   return (
-    <li className={ok ? "text-green-700" : "text-amber-800"}>
+    <li className={ok ? "text-positive-foreground" : "text-warning-foreground"}>
       <span aria-hidden>{ok ? "Ready: " : "Missing: "}</span>{children}
       {!ok && detail ? <span className="block pl-4 text-xs text-muted-foreground">{detail}</span> : null}
     </li>
@@ -64,11 +65,14 @@ function Check({ ok, children, detail }: { ok: boolean | undefined; children: st
 
 const day = (d: Date) => d.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" });
 
+/** The mailboxes API has no paging: a full read is announced under the sender list. */
+const MAILBOX_LIMIT = 200;
+
 export function CampaignLaunchStep({ campaignId, audienceSize, onLaunched, className }: CampaignLaunchStepProps) {
   const brand = useBrand();
   const campaign = useG8Query((signal) => g8Get(`/campaigns/${campaignId}/full`, undefined, { signal }), [campaignId]);
   const generation = useG8Query((signal) => g8Get(`/campaigns/${campaignId}/status`, undefined, { signal }), [campaignId]);
-  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: 200 }, { signal }), []);
+  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: MAILBOX_LIMIT }, { signal }), []);
   const verdict = useG8Query((signal) => g8Get("/deliverability/safe-to-send", undefined, { signal }), []);
   const [chosen, setChosen] = useState<Set<string> | null>(null);
   const [confirm, setConfirm] = useState(false);
@@ -136,20 +140,20 @@ export function CampaignLaunchStep({ campaignId, audienceSize, onLaunched, class
   if (result) {
     const channels = (result.channels_attached as Array<{ email?: string }> | undefined) ?? [];
     return (
-      <section aria-label="Launch result" className={`space-y-2 rounded-md border border-green-200 bg-green-50 p-4 ${className ?? ""}`}>
+      <section aria-label="Launch result" className={`space-y-2 rounded-md border border-positive-foreground/25 bg-positive p-4 ${className ?? ""}`}>
         <h3 className="font-medium">Campaign {String(result.status ?? "launched")}</h3>
         <p className="text-sm">{String(result.message ?? "")}</p>
         <p className="text-sm text-muted-foreground">
           Sequence {String(result.sequence_id ?? "")} with {String(result.steps_created ?? 0)} steps, sending from {channels.map((m) => m.email).join(", ") || "the chosen mailboxes"}.
         </p>
-        {Array.isArray(result.warnings) && result.warnings.length > 0 ? <ul className="list-disc pl-5 text-sm text-amber-900">{result.warnings.map((w) => <li key={String(w)}>{String(w)}</li>)}</ul> : null}
+        {Array.isArray(result.warnings) && result.warnings.length > 0 ? <ul className="list-disc pl-5 text-sm text-warning-foreground">{result.warnings.map((w) => <li key={String(w)}>{String(w)}</li>)}</ul> : null}
       </section>
     );
   }
   return (
     <section aria-label="Launch" className={`space-y-3 ${className ?? ""}`}>
       <h3 className="font-medium">Ready to launch {String(c.name ?? "")}</h3>
-      {alreadyLaunched ? <p role="status" className="rounded bg-green-50 p-2 text-sm text-green-900">This campaign has already been launched. Manage it in the sequencer.</p> : null}
+      {alreadyLaunched ? <p role="status" className="rounded bg-positive p-2 text-sm text-positive-foreground">This campaign has already been launched. Manage it in the sequencer.</p> : null}
       <ul className="space-y-1 text-sm">
         <Check ok={hasAudience}>An audience list is attached</Check>
         <Check ok={hasSteps}>The sequence has at least one step</Check>
@@ -157,23 +161,23 @@ export function CampaignLaunchStep({ campaignId, audienceSize, onLaunched, class
         <Check ok={senders.size > 0}>At least one active sending mailbox is selected</Check>
       </ul>
       {genError && !copy.ready ? (
-        <p role="alert" className="rounded bg-red-50 p-2 text-sm text-red-800">Writing the campaign documents failed: {genError}</p>
+        <p role="alert" className="rounded bg-error p-2 text-sm text-error-foreground">Writing the campaign documents failed: {genError}</p>
       ) : null}
       {copy.known && !copy.ready ? (
         <div className="space-y-1">
           {writeCopy.error ? <ApiError error={writeCopy.error} title="Could not write the copy" /> : null}
-          {copyPoll.done && !copyStateOf(copyPoll.status).ready && !writeCopy.loading ? <p role="status" className="text-sm text-amber-900">The copy did not finish. Try again, or write it in Campaign assets.</p> : null}
-          {!copyPoll.polling && !copyPoll.done && copyPoll.attempts > 0 ? <p role="status" className="text-sm text-amber-900">Still writing. Check back in a minute.</p> : null}
+          {copyPoll.done && !copyStateOf(copyPoll.status).ready && !writeCopy.loading ? <p role="status" className="text-sm text-warning-foreground">The copy did not finish. Try again, or write it in Campaign assets.</p> : null}
+          {!copyPoll.polling && !copyPoll.done && copyPoll.attempts > 0 ? <p role="status" className="text-sm text-warning-foreground">Still writing. Check back in a minute.</p> : null}
           <Button variant="outline" loading={writeCopy.loading} disabled={writingCopy} onClick={() => setConfirmCopy(true)}>Write the email copy with AI</Button>
         </div>
       ) : null}
       {unsafe ? (
-        <p role="alert" className="rounded bg-amber-50 p-2 text-sm text-amber-900">
+        <p role="alert" className="rounded bg-warning p-2 text-sm text-warning-foreground">
           Deliverability warning: {typeof v.reason === "string" ? v.reason : "sending is not recommended right now."}
         </p>
       ) : null}
       {held.length > 0 ? (
-        <div role="status" className="rounded bg-amber-50 p-2 text-sm text-amber-900">
+        <div role="status" className="rounded bg-warning p-2 text-sm text-warning-foreground">
           <p>New mailboxes send nothing for their first {WARMUP_HOLD_DAYS} days while they warm up. The campaign goes live, but no email goes out from:</p>
           <ul className="list-disc pl-5">{held.map(({ m, until }) => <li key={m.id}>{m.email ?? `Mailbox ${m.id}`} until {day(until as Date)}</li>)}</ul>
         </div>
@@ -195,11 +199,12 @@ export function CampaignLaunchStep({ campaignId, audienceSize, onLaunched, class
             {m.email ?? `Mailbox ${m.id}`}
           </label>
         ))}
+        <FirstNotice shown={listOf<Mailbox>(mailboxes.data).length} limit={MAILBOX_LIMIT} noun="mailboxes" />
       </fieldset>
       {launch.error ? (
         <div className="space-y-1">
           <ApiError error={launch.error} title="The launch did not complete" />
-          <p className="text-sm text-amber-900">Do not retry blindly. A sequence may already exist; check the campaign before launching again.</p>
+          <p className="text-sm text-warning-foreground">Do not retry blindly. A sequence may already exist; check the campaign before launching again.</p>
         </div>
       ) : null}
       <Button disabled={!ready} loading={launch.loading} onClick={() => setConfirm(true)}>Launch campaign</Button>