@graph8/sdk 0.370.0 → 0.373.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/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>

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

@@ -40,7 +40,7 @@ function Tiles({ data }: { data: Record<string, unknown> }) {
           {tiles.map(([k, v]) => (
             <div key={k} className="rounded-md border p-3">
               <dt className="text-xs capitalize text-muted-foreground">{k}</dt>
-              <dd className="text-xl font-semibold">{v}</dd>
+              <dd className="text-xl font-medium">{v}</dd>
             </div>
           ))}
         </dl>

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

@@ -26,6 +26,7 @@
 import { useEffect, useState } from "react";
 import { Button, Input, Skeleton, Textarea } 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";
@@ -62,8 +63,11 @@ const emptyDraft: Draft = { name: "", category: "Outbound", goal: "", brief: "",
 
 interface Idea { id?: string; campaign_name?: string; campaign_category?: string; core_concept?: string; why_this_works?: string; primary_hook?: string; target_channels?: string[] }
 
+/** The persona API has no paging: a full read is announced under the checkboxes. */
+const PERSONA_LIMIT = 50;
+
 function IdeaStep({ websiteUrl, onPick, onSkip }: { websiteUrl: string; onPick: (i: Idea) => void; onSkip: () => void }) {
-  const personas = useG8Query((signal) => g8Get("/personas", { limit: 50 }, { signal }), []);
+  const personas = useG8Query((signal) => g8Get("/personas", { limit: PERSONA_LIMIT }, { signal }), []);
   const [goal, setGoal] = useState(GOALS[0]);
   const [count, setCount] = useState(5);
   const [direction, setDirection] = useState("");
@@ -104,6 +108,7 @@ function IdeaStep({ websiteUrl, onPick, onSkip }: { websiteUrl: string; onPick:
               <input type="checkbox" checked={selected.includes(p.title ?? "")} onChange={(e) => setSelected(e.target.checked ? [...selected, p.title ?? ""] : selected.filter((t) => t !== p.title))} />{p.title}
             </label>
           ))}
+          <FirstNotice shown={personaRows.length} limit={PERSONA_LIMIT} noun="personas" />
         </fieldset>
       ) : null}
       {[start.error, poll.error].map((e, i) => (e ? <ApiError key={i} error={e} title="Idea generation failed" /> : null))}
@@ -111,10 +116,10 @@ function IdeaStep({ websiteUrl, onPick, onSkip }: { websiteUrl: string; onPick:
         <Button disabled={!websiteUrl || poll.polling} loading={start.loading} onClick={() => setConfirm(true)}>Generate ideas</Button>
         <Button variant="outline" onClick={onSkip}>Skip, write my own</Button>
       </div>
-      {!websiteUrl ? <p className="text-sm text-amber-800">Save the company website in IcpEditor first; ideas are generated from it.</p> : null}
+      {!websiteUrl ? <p className="text-sm text-warning-foreground">Save the company website in IcpEditor first; ideas are generated from it.</p> : null}
       {poll.polling ? <p role="status" className="text-sm text-muted-foreground">Generating ideas. This takes 10 to 20 seconds.</p> : null}
-      {!poll.polling && !poll.done && poll.attempts > 0 && !poll.error ? <p role="status" className="text-sm text-amber-800">Still running. Check back in a minute and generate again if nothing appears.</p> : null}
-      {failed ? <p role="alert" className="text-sm text-red-700">Generation failed: {text(poll.status?.error) || "try again"}.</p> : null}
+      {!poll.polling && !poll.done && poll.attempts > 0 && !poll.error ? <p role="status" className="text-sm text-warning-foreground">Still running. Check back in a minute and generate again if nothing appears.</p> : null}
+      {failed ? <p role="alert" className="text-sm text-error-foreground">Generation failed: {text(poll.status?.error) || "try again"}.</p> : null}
       {poll.done && !failed && ideas.length === 0 ? <p className="text-sm text-muted-foreground">No ideas came back. Try a different goal or direction.</p> : null}
       <ul className="space-y-2">
         {ideas.map((idea, i) => (
@@ -206,7 +211,7 @@ export function CampaignWizard({ initialCampaignId, websiteUrl, onLaunched, auto
       </nav>
 
       {dispatchFailed ? (
-        <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">
           The campaign was created, but writing its documents could not be started. Write the email copy from the Launch step before launching.
         </p>
       ) : null}

package/blocks/campaigns/components/icp-detail.tsx

@@ -17,6 +17,7 @@ import { useState } from "react";
 import type { ReactNode } from "react";
 import { Button, Input, Skeleton, Textarea } 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 { FormSheet } from "@/g8/components/screen/form-sheet";
@@ -48,10 +49,13 @@ function isPinned(r: Record<string, unknown> | undefined): boolean {
   return Boolean(r && (r.pinned ?? r.is_pinned));
 }
 
+/** The ICP API has no paging: when the read is full, a missing ICP may just be beyond it, and the screen says so. */
+const ICP_LIMIT = 200;
+
 export function IcpDetail({ icpId, onClose, onExpand, onCollapse, onChanged, renderActions, className }: IcpDetailProps) {
   const [form, setForm] = useState<Form | null>(null);
   const [archiving, setArchiving] = useState(false);
-  const q = useG8Query((signal) => g8Get("/icps", { limit: 200 }, { signal }), [icpId]);
+  const q = useG8Query((signal) => g8Get("/icps", { limit: ICP_LIMIT }, { signal }), [icpId]);
   const icp = listOf<Record<string, any>>(q.data).find((r) => String(r.id) === icpId);
 
   const save = useG8Mutation(async (f: Form) => {
@@ -75,7 +79,12 @@ export function IcpDetail({ icpId, onClose, onExpand, onCollapse, onChanged, ren
 
   if (q.error) return <ApiError error={q.error} title="Could not load the ICP" onRetry={() => void q.refetch()} className={className} />;
   if (q.loading && !q.data) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
-  if (!icp) return <p className={`p-4 text-sm ${className ?? ""}`}>This ICP no longer exists or was archived.</p>;
+  if (!icp) return (
+    <div className={`p-4 text-sm ${className ?? ""}`}>
+      <p>This ICP no longer exists or was archived.</p>
+      <FirstNotice shown={listOf(q.data).length} limit={ICP_LIMIT} noun="ICPs" />
+    </div>
+  );
 
   const f = (icp.firmographics ?? {}) as Record<string, unknown>;
   const arr = (v: unknown) => (Array.isArray(v) ? v.join(", ") : text(v));

package/blocks/campaigns/components/icp-editor.tsx

@@ -21,6 +21,7 @@
 import { useState } from "react";
 import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea } 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 { EmptyState } from "@/g8/components/empty-state";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
@@ -108,8 +109,8 @@ function ProfileCard({ websiteUrl: override, onChange }: IcpEditorProps) {
         </label>
       ) : null}
       {status.polling ? <p role="status" className="text-sm text-muted-foreground">Building the profile. This can take a minute.</p> : null}
-      {status.done && !status.polling ? <p role="status" className="text-sm text-green-700">Profile build finished.</p> : null}
-      {saved ? <p role="status" className="text-sm text-green-700">Saved.</p> : null}
+      {status.done && !status.polling ? <p role="status" className="text-sm text-positive-foreground">Profile build finished.</p> : null}
+      {saved ? <p role="status" className="text-sm text-positive-foreground">Saved.</p> : null}
       {[save.error, generate.error, approve.error, status.error].map((e, i) => (e ? <ApiError key={i} error={e} /> : null))}
       <div className="flex flex-wrap gap-2">
         <Button loading={save.loading} disabled={!website.trim() || (approved && !unlock)} onClick={() => void save.mutate(undefined)}>Save profile</Button>
@@ -136,10 +137,13 @@ const emptyForm: IcpForm = { name: "", description: "", industries: "", size: ""
 
 const formOf = (icp: IcpRow): IcpForm => icpFormOf(icp as Record<string, any>);
 
+/** The ICP API has no paging: a full read is announced under the table. */
+const ICP_LIMIT = 100;
+
 export function IcpEditor(props: IcpEditorProps) {
   const { onChange, onOpen, className } = props;
   const profile = useCompanyProfile(props.websiteUrl);
-  const icps = useG8Query((signal) => g8Get("/icps", { limit: 100 }, { signal }), [props.refreshKey]);
+  const icps = useG8Query((signal) => g8Get("/icps", { limit: ICP_LIMIT }, { signal }), [props.refreshKey]);
   const [editing, setEditing] = useState<IcpRow | "new" | null>(null);
   const [form, setForm] = useState<IcpForm>(emptyForm);
   const [archiving, setArchiving] = useState<IcpRow | null>(null);
@@ -192,6 +196,7 @@ export function IcpEditor(props: IcpEditorProps) {
             ))}
           </TableBody>
         </Table>
+        <FirstNotice shown={rows.length} limit={ICP_LIMIT} noun="ICPs" />
         {!icps.loading && !icps.error && rows.length === 0 ? <EmptyState title="No ICPs yet" description="Describe who you sell to. Campaigns and personas build on it." /> : null}
       </section>
 

package/blocks/campaigns/components/persona-detail.tsx

@@ -16,6 +16,8 @@ import { useState } from "react";
 import type { ReactNode } from "react";
 import { Button, Input, Skeleton, Textarea } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
+import { useAllPages } from "@/g8/hooks/use-all-pages";
+import { hasNextOf } from "@/g8/lib/paging";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { DetailPanel } from "@/g8/components/screen/detail-panel";
 import { FormSheet } from "@/g8/components/screen/form-sheet";
@@ -49,11 +51,18 @@ function isPinned(r: Record<string, unknown> | undefined): boolean {
   return Boolean(r && (r.pinned ?? r.is_pinned));
 }
 
+/** Campaigns per read: every page is read, so no targeting campaign is missed. */
+const CAMPAIGN_PAGE = 100;
+
 export function PersonaDetail({ personaId, onClose, onExpand, onCollapse, onChanged, onOpenCampaign, renderActions, className }: PersonaDetailProps) {
   const [form, setForm] = useState<Form | null>(null);
   const [archiving, setArchiving] = useState(false);
   const q = useG8Query((signal) => g8Get(`/personas/${personaId}`, undefined, { signal }), [personaId]);
-  const campaigns = useG8Query((signal) => g8Get("/campaigns", { page: 1, limit: 100 }, { signal }), [personaId]);
+  const campaigns = useAllPages<CampaignRow>(async (page, signal) => {
+    const env = await g8Get("/campaigns", { page, limit: CAMPAIGN_PAGE }, { signal });
+    const rows = listOf<CampaignRow>(env);
+    return { rows, hasNext: hasNextOf(env, CAMPAIGN_PAGE, rows.length) };
+  }, [personaId]);
   const p = objectOf(q.data) as Record<string, any>;
 
   const save = useG8Mutation(async (f: Form) => {
@@ -79,7 +88,7 @@ export function PersonaDetail({ personaId, onClose, onExpand, onCollapse, onChan
   if (q.loading && !q.data) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
 
   const title = text(p.title) || `Persona ${personaId}`;
-  const targeting = listOf<CampaignRow>(campaigns.data).filter((c) => (c.target_persona ?? "").trim().toLowerCase() === title.trim().toLowerCase());
+  const targeting = campaigns.items.filter((c) => (c.target_persona ?? "").trim().toLowerCase() === title.trim().toLowerCase());
   const startEdit = () => {
     save.reset();
     setForm(personaFormOf(p));

package/blocks/campaigns/components/persona-editor.tsx

@@ -19,6 +19,7 @@
 import { useState } from "react";
 import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea } 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 { EmptyState } from "@/g8/components/empty-state";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
@@ -67,9 +68,12 @@ const emptyForm: PersonaForm = { title: "", why: "", signals: "", approach: "",
 
 const formOf = (p: PersonaRow): PersonaForm => personaFormOf(p as Record<string, any>);
 
+/** The persona API has no paging: a full read is announced under the table. */
+const PERSONA_LIMIT = 100;
+
 export function PersonaEditor({ websiteUrl, onChange, onOpen, refreshKey, className }: PersonaEditorProps) {
   const profile = useCompanyProfile(websiteUrl);
-  const personas = useG8Query((signal) => g8Get("/personas", { limit: 100 }, { signal }), [refreshKey]);
+  const personas = useG8Query((signal) => g8Get("/personas", { limit: PERSONA_LIMIT }, { signal }), [refreshKey]);
   const [editing, setEditing] = useState<PersonaRow | "new" | null>(null);
   const [form, setForm] = useState<PersonaForm>(emptyForm);
   const [archiving, setArchiving] = useState<PersonaRow | null>(null);
@@ -158,6 +162,7 @@ export function PersonaEditor({ websiteUrl, onChange, onOpen, refreshKey, classN
           ))}
         </TableBody>
       </Table>
+      <FirstNotice shown={rows.length} limit={PERSONA_LIMIT} noun="personas" />
       {!personas.loading && !personas.error && rows.length === 0 ? <EmptyState title="No personas yet" description="Add the roles you sell to, or let AI recommend them." /> : null}
 
       <Dialog open={editing !== null} onOpenChange={(o) => { if (!o) setEditing(null); }}>

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

@@ -98,10 +98,10 @@ export function commaList(value: string): string[] {
 
 export function statusClass(status: string | null | undefined): string {
   const s = (status ?? "").toLowerCase();
-  if (["active", "live", "completed", "approved", "complete", "done"].includes(s)) return "bg-green-100 text-green-800";
-  if (["draft", "pending", "running", "generating", "in_progress", "copy_in_progress", "scheduling"].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", "live", "completed", "approved", "complete", "done"].includes(s)) return "bg-positive text-positive-foreground";
+  if (["draft", "pending", "running", "generating", "in_progress", "copy_in_progress", "scheduling"].includes(s)) return "bg-warning text-warning-foreground";
+  if (s) return "bg-error text-error-foreground";
+  return "bg-muted text-foreground";
 }
 
 /** Timestamps are shown in UTC so the same value reads the same everywhere. */