@graph8/sdk 0.370.0 → 0.373.0

package/blocks/sequencer/components/record-sequences-tab.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+/**
+ * RecordSequencesTab: every sequence one contact is or was enrolled in, with its state and step, "Add to sequence"
+ * (the sending preflight and confirmation live in the enroll dialog) and a confirmed "Withdraw" per active enrollment.
+ * Use it as an `extraDetailTabs` entry of ContactsScreen:
+ *   { id: "sequences", label: "Sequences", render: (c) => <RecordSequencesTab contactId={c.id} onOpenSequence={(id) => router.push(`/sequences?id=${id}`)} /> }
+ *
+ * SDK operations, in order:
+ *   1. getContactSequences          GET  /contacts/{id}/sequences                 (read; the API answers the 50 most recent enrollments)
+ *   2. AddToSequenceButton: listSequences, getSafeToSend, getSequence, addContactsToSequence   (external: confirmed in the dialog)
+ *   3. withdrawContactsFromSequences POST /contacts/withdraw-from-sequences       (write; stops the contact's steps, confirmed here)
+ * Withdraw is contract-tier `write`, but it stops a contact's outreach, so it is confirmed with the destructive dialog anyway.
+ * Withdraw names ONE sequence; it never uses the API's remove-from-all switch.
+ */
+
+import { useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { Workflow } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+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 { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { AddToSequenceButton } from "./add-to-sequence-button";
+import { listOf } from "../lib/sequencer-utils";
+
+/** One row of GET /contacts/{id}/sequences. */
+interface Enrollment { id?: number | null; sequence_id?: string | null; sequence_name?: string | null; sequence_status?: string | null; state?: string | null; current_step_order?: number | null; created_at?: string | null }
+
+/** The server returns at most this many enrollments, newest first. */
+export const SEQUENCES_TAB_API_LIMIT = 50;
+
+const TONE: Record<string, Tone> = { waiting: "info", paused: "warning", completed: "positive", replied: "positive", bounced: "negative", skipped: "neutral" };
+/** Enrollments that are already over cannot be withdrawn. */
+const OVER = new Set(["completed", "replied", "bounced", "skipped", "withdrawn", "removed"]);
+
+function when(iso: string | null | undefined): string {
+  const d = iso ? new Date(iso) : null;
+  return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }) : "";
+}
+
+export interface RecordSequencesTabProps {
+  contactId: number;
+  /** Route to the sequence in your sequences screen. Without it the rows link to `${sequencesPath}?id=<sequence id>`. */
+  onOpenSequence?: (sequenceId: string) => void;
+  /** Path of your sequences screen for the plain links. Default "/sequences". */
+  sequencesPath?: string;
+}
+
+export function RecordSequencesTab({ contactId, onOpenSequence, sequencesPath = "/sequences" }: RecordSequencesTabProps) {
+  const [withdrawing, setWithdrawing] = useState<Enrollment | null>(null);
+  const q = useG8Query(async (signal) => listOf<Enrollment>(await g8Get(`/contacts/${contactId}/sequences`, undefined, { signal })), [contactId]);
+  const withdraw = useG8Mutation(async (e: Enrollment) => {
+    await g8Post("/contacts/withdraw-from-sequences", { contact_ids: [contactId], sequence_id: e.sequence_id });
+    setWithdrawing(null);
+    await q.refetch();
+  }, { invalidates: [["sequences"]], onError: () => setWithdrawing(null) });
+
+  if (q.error) return <ApiError error={q.error} title="Could not load sequences" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading sequences" />;
+  const rows = q.data;
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <p className="text-sm text-muted-foreground">{rows.length === 1 ? "1 enrollment" : `${rows.length.toLocaleString()} enrollments`}</p>
+        <AddToSequenceButton contactIds={[contactId]} onEnrolled={() => void q.refetch()} />
+      </div>
+      {withdraw.error ? <ApiError error={withdraw.error} title="Could not withdraw the contact" /> : null}
+      {rows.length === 0 ? (
+        <EmptyState compact icon={<Workflow className="size-8" />} title="Not in any sequence" description="Add this contact to a sequence to start its steps." />
+      ) : (
+        <ul className="divide-y rounded-md border" aria-label="Sequences">
+          {rows.map((e, i) => {
+            const state = (e.state ?? "").toLowerCase();
+            return (
+              <li key={e.id ?? `${e.sequence_id}-${i}`} className="flex items-center justify-between gap-3 p-3 text-sm">
+                <div className="min-w-0">
+                  {e.sequence_id ? (
+                    <a
+                      href={`${sequencesPath}?id=${encodeURIComponent(e.sequence_id)}`}
+                      className="block truncate font-medium hover:underline"
+                      onClick={(ev) => {
+                        if (!onOpenSequence || ev.defaultPrevented || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || ev.altKey) return;
+                        ev.preventDefault();
+                        onOpenSequence(e.sequence_id as string);
+                      }}
+                    >
+                      {e.sequence_name || "Untitled sequence"}
+                    </a>
+                  ) : <span className="font-medium">{e.sequence_name || "Untitled sequence"}</span>}
+                  <p className="text-xs text-muted-foreground">
+                    {[e.current_step_order != null ? `Step ${e.current_step_order}` : null, e.created_at ? `Enrolled ${when(e.created_at)}` : null, e.sequence_status ? `Sequence ${e.sequence_status.toLowerCase()}` : null].filter(Boolean).join(" · ")}
+                  </p>
+                </div>
+                <div className="flex shrink-0 items-center gap-2">
+                  <StatusPill tone={TONE[state] ?? "neutral"} dot>{state || "unknown"}</StatusPill>
+                  {e.sequence_id && !OVER.has(state) ? (
+                    <Button size="sm" variant="ghost" loading={withdraw.loading && withdrawing?.id === e.id} onClick={() => setWithdrawing(e)}>Withdraw</Button>
+                  ) : null}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+      {rows.length >= SEQUENCES_TAB_API_LIMIT ? (
+        <p role="note" className="text-xs text-muted-foreground">Showing the {SEQUENCES_TAB_API_LIMIT} most recent enrollments. Older ones are in the sequence itself.</p>
+      ) : null}
+      <ConfirmSpendDialog
+        open={withdrawing !== null}
+        tier="destructive"
+        title={`Withdraw from ${withdrawing?.sequence_name || "this sequence"}`}
+        description="The contact stops receiving this sequence's steps. Their other sequences are not changed."
+        affected={1}
+        confirmLabel="Withdraw"
+        confirming={withdraw.loading}
+        onConfirm={() => withdrawing && void withdraw.mutate(withdrawing)}
+        onCancel={() => setWithdrawing(null)}
+      />
+    </div>
+  );
+}

package/blocks/sequencer/components/sequence-builder.tsx

@@ -34,6 +34,8 @@ import { g8Delete, g8Get, g8Patch, 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 { ListSelect } from "@/g8/crm/components/list-select";
+import { FirstNotice } from "@/g8/components/paging-notices";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import type { ConfirmTier } from "@/g8/components/confirm-spend-dialog";
 import { StepEditor } from "./step-editor";
@@ -102,11 +104,8 @@ const PHONE_KEYS = ["phone_numbers", "active_phone_numbers", "drafted_phone_numb
 const LINKEDIN_KEYS = ["linkedin_accounts", "active_linkedin_accounts", "drafted_linkedin_accounts"];
 const phoneFits = (p: PhoneOption, type: "ai" | "dialer") => !p.inbound_type || p.inbound_type === type;
 const linkedinLabel = (a: LinkedinOption) => a.name || a.display_name || a.public_identifier || a.email || `Account ${a.id}`;
-interface ListOption {
-  id: number;
-  title: string;
-  contact_count?: number | null;
-}
+/** The mailboxes API has no paging: a full read is announced under the sender dropdown. */
+const MAILBOX_LIMIT = 200;
 type Pending = { kind: "create" } | { kind: "update" | "delete"; step: DraftStep };
 
 function describe(p: Pending, live: boolean): { tier: ConfirmTier; title: string; description: string; label: string } {
@@ -157,8 +156,7 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
   // Senders already attached in edit mode by an earlier (failed) append: never attach them twice.
   const attached = useRef<Set<string>>(new Set());
 
-  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: 200 }, { signal }), [], { enabled: !editing });
-  const lists = useG8Query((signal) => g8Get("/lists", { limit: 100 }, { signal }), [], { enabled: !editing });
+  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: MAILBOX_LIMIT }, { signal }), [], { enabled: !editing });
   const existing = useG8Query(
     async (signal) => {
       const [seq, list] = await Promise.all([
@@ -323,15 +321,17 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
               );
             })}
           </select>
-          <select aria-label="Audience list" className={select} value={listId} onChange={(e) => setListId(e.target.value)}>
-            <option value="">Audience list (required)</option>
-            {listOf<ListOption>(lists.data).map((l) => (
-              <option key={l.id} value={l.id}>
-                {l.title}
-                {l.contact_count != null ? ` (${l.contact_count})` : ""}
-              </option>
-            ))}
-          </select>
+          <ListSelect
+            label="Audience list"
+            emptyOption="Audience list (required)"
+            optionLabel={(l) => `${l.title}${l.contact_count != null ? ` (${l.contact_count})` : ""}`}
+            pageSize={100}
+            value={listId}
+            valueLabel={defaultListId ? `List ${defaultListId}` : undefined}
+            selectClassName={select}
+            onChange={(l) => setListId(l ? String(l.id) : "")}
+          />
+          <FirstNotice className="sm:col-span-3" shown={listOf<MailboxOption>(mailboxes.data).length} limit={MAILBOX_LIMIT} noun="mailboxes" />
         </div>
       ) : null}
       {need.aiPhone || need.dialerPhone || need.linkedin ? (
@@ -373,12 +373,11 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
           {String(objectOf(linkedin.data).message ?? "No LinkedIn account is connected.")} Connect one in the {brand.linkLabel} app.
         </p>
       ) : null}
-      {mailboxes.error || lists.error || phones.error || linkedin.error ? (
+      {mailboxes.error || phones.error || linkedin.error ? (
         <ApiError
-          error={mailboxes.error ?? lists.error ?? phones.error ?? linkedin.error}
+          error={mailboxes.error ?? phones.error ?? linkedin.error}
           onRetry={() => {
             void mailboxes.refetch();
-            void lists.refetch();
             if (need.aiPhone || need.dialerPhone) void phones.refetch();
             if (need.linkedin) void linkedin.refetch();
           }}
@@ -449,7 +448,7 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
       {run.error ? <ApiError error={run.error} onRetry={run.reset} /> : null}
       {append.error ? <ApiError error={append.error} onRetry={append.reset} /> : null}
       {saved ? (
-        <p role="status" className="text-sm text-green-700">
+        <p role="status" className="text-sm text-positive-foreground">
           {saved}
         </p>
       ) : null}

package/blocks/sequencer/components/sequence-detail.tsx

@@ -143,6 +143,8 @@ export interface SequenceDetailProps {
   refreshKey?: number;
   /** Open another sequence (the duplicate). */
   onOpenSequence?: (sequenceId: string) => void;
+  /** Open an enrolled person in your contacts screen. */
+  onOpenContact?: (contactId: number) => void;
   renderActions?: (sequence: SequenceRow) => ReactNode;
   extraTabs?: { id: string; label: string; render: (sequence: SequenceRow) => ReactNode }[];
   className?: string;
@@ -211,7 +213,7 @@ export function SequenceDetail(props: SequenceDetailProps) {
               description={
                 <>
                   <p>{COPY[p.action].description}</p>
-                  {p.warnings.length > 0 ? <ul className="mt-2 list-disc pl-5 text-amber-800">{p.warnings.map((w) => <li key={w}>{w}</li>)}</ul> : null}
+                  {p.warnings.length > 0 ? <ul className="mt-2 list-disc pl-5 text-warning-foreground">{p.warnings.map((w) => <li key={w}>{w}</li>)}</ul> : null}
                 </>
               }
               recipients={p.action === "archive" ? undefined : (row.contact_count ?? undefined)}
@@ -250,7 +252,7 @@ export function SequenceDetail(props: SequenceDetailProps) {
           ),
         },
         { id: "steps", label: "Steps", count: row.step_count ?? undefined, content: <SequenceStepsPanel sequenceId={id} stepId={props.stepId} onStepChange={props.onStepChange} onChanged={changed} /> },
-        { id: "contacts", label: "Contacts", count: row.contact_count ?? undefined, content: <SequenceEnrollments key={statsKey} sequenceId={id} contactId={props.contactId} onContactChange={props.onContactChange} /> },
+        { id: "contacts", label: "Contacts", count: row.contact_count ?? undefined, content: <SequenceEnrollments key={statsKey} sequenceId={id} contactId={props.contactId} onContactChange={props.onContactChange} onOpenContact={props.onOpenContact} /> },
         { id: "results", label: "Results", content: <SequenceStats key={`${id}:${statsKey}`} sequenceId={id} refreshSeconds={group === "live" ? 60 : undefined} /> },
         ...(props.extraTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(row) })),
       ]}

package/blocks/sequencer/components/sequence-enrollments.tsx

@@ -31,6 +31,8 @@ export interface SequenceEnrollmentsProps {
   /** The open enrollment, by contact id. Controlled so a screen can deep-link it. */
   contactId?: string;
   onContactChange?: (contactId: string | null) => void;
+  /** Open the enrolled person in your contacts screen (adds an "Open in contacts" button). */
+  onOpenContact?: (contactId: number) => void;
   pageSize?: number;
   className?: string;
 }
@@ -41,7 +43,7 @@ const STATES = ["", "waiting", "paused", "completed", "replied", "bounced", "ski
 const TONE: Record<string, Tone> = { waiting: "info", paused: "warning", completed: "positive", replied: "positive", bounced: "negative", skipped: "neutral" };
 const nameOf = (e: Enrollment) => e.name || e.email || (e.contact_id != null ? `Contact ${e.contact_id}` : "Contact");
 
-export function SequenceEnrollments({ sequenceId, contactId, onContactChange, pageSize = 25, className }: SequenceEnrollmentsProps) {
+export function SequenceEnrollments({ sequenceId, contactId, onContactChange, onOpenContact, pageSize = 25, className }: SequenceEnrollmentsProps) {
   const [state, setState] = useState("");
   const [page, setPage] = useState(1);
   const [resume, setResume] = useState<Enrollment | null>(null);
@@ -89,7 +91,7 @@ export function SequenceEnrollments({ sequenceId, contactId, onContactChange, pa
         <Button size="sm" variant="outline" disabled={rows.length < pageSize} onClick={() => setPage((p) => p + 1)}>Next</Button>
       </div>
       {open ? (
-        <SectionCard title={`${nameOf(open)} in this sequence`} actions={<>{actions(open)}<Button size="sm" variant="ghost" onClick={() => onContactChange?.(null)}>Close</Button></>}>
+        <SectionCard title={`${nameOf(open)} in this sequence`} actions={<>{actions(open)}{onOpenContact && open.contact_id != null ? <Button size="sm" variant="outline" onClick={() => onOpenContact(open.contact_id as number)}>Open in contacts</Button> : null}<Button size="sm" variant="ghost" onClick={() => onContactChange?.(null)}>Close</Button></>}>
           <KeyValueList columns={2} items={fieldItems(open as Record<string, unknown>)} />
           {open.contact_id != null ? (
             <SectionCard title="Contact" description="The full contact record.">

package/blocks/sequencer/components/sequence-list.tsx

@@ -204,7 +204,7 @@ export function SequenceList({ status, pageSize = 25, onOpen, onCreate, onChange
             <>
               <p>{COPY[pending.action].description}</p>
               {pending.warnings.length > 0 ? (
-                <ul className="mt-2 list-disc pl-5 text-amber-800">
+                <ul className="mt-2 list-disc pl-5 text-warning-foreground">
                   {pending.warnings.map((w) => (
                     <li key={w}>{w}</li>
                   ))}

package/blocks/sequencer/components/sequence-stats.tsx

@@ -50,9 +50,9 @@ const STATES = ["", "waiting", "paused", "completed", "replied", "bounced", "ski
 
 function Tile({ label, value }: { label: string; value: string | number }) {
   return (
-    <div className="rounded border border-gray-200 p-3">
-      <div className="text-xs capitalize text-gray-500">{label}</div>
-      <div className="text-xl font-semibold">{value}</div>
+    <div className="rounded border border-border p-3">
+      <div className="text-xs capitalize text-muted-foreground">{label}</div>
+      <div className="text-xl font-medium">{value}</div>
     </div>
   );
 }
@@ -145,7 +145,7 @@ export function SequenceStats({ sequenceId, pageSize = 25, refreshSeconds, class
                 <TableCell>{st.step_order}</TableCell>
                 <TableCell>{st.step_type}</TableCell>
                 <TableCell>{st.total_contacts ?? 0}</TableCell>
-                <TableCell className="text-xs text-gray-600">
+                <TableCell className="text-xs text-muted-foreground">
                   {Object.entries(st.counts ?? {})
                     .filter(([, n]) => n > 0)
                     .map(([k, n]) => `${k}: ${n}`)
@@ -156,11 +156,11 @@ export function SequenceStats({ sequenceId, pageSize = 25, refreshSeconds, class
           </TableBody>
         </Table>
       ) : (
-        <p className="text-sm text-gray-500">No step activity yet.</p>
+        <p className="text-sm text-muted-foreground">No step activity yet.</p>
       )}
 
       {skips.length > 0 ? (
-        <p className="text-sm text-gray-600" data-testid="skip-reasons">
+        <p className="text-sm text-muted-foreground" data-testid="skip-reasons">
           Skipped contacts, counted once each: {skips.map(([k, n]) => `${k.replace(/^skipped_/, "").replace(/_/g, " ")} ${n}`).join(", ")}
         </p>
       ) : null}
@@ -171,7 +171,7 @@ export function SequenceStats({ sequenceId, pageSize = 25, refreshSeconds, class
             Contacts in
             <select
               aria-label="Contact state"
-              className="ml-2 h-8 rounded border border-gray-300 px-1"
+              className="ml-2 h-8 rounded border border-input px-1"
               value={state}
               onChange={(e) => {
                 setState(e.target.value);
@@ -201,7 +201,7 @@ export function SequenceStats({ sequenceId, pageSize = 25, refreshSeconds, class
             <TableBody>
               {rows.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={4} className="text-sm text-gray-500">
+                  <TableCell colSpan={4} className="text-sm text-muted-foreground">
                     {contacts.loading ? "Loading..." : "No contacts in this state."}
                   </TableCell>
                 </TableRow>

package/blocks/sequencer/components/sequences-screen.tsx

@@ -52,6 +52,8 @@ export interface SequencesScreenProps {
   renderDetailActions?: (sequence: SequenceRow) => ReactNode;
   /** Extra tabs in the open sequence's panel. */
   extraDetailTabs?: { id: string; label: string; render: (sequence: SequenceRow) => ReactNode }[];
+  /** Open an enrolled person in your contacts screen; without it the Contacts tab has no such button. */
+  onOpenContact?: (contactId: number) => void;
   className?: string;
 }
 
@@ -135,6 +137,7 @@ export function SequencesScreen(props: SequencesScreenProps) {
                 onStepChange={(v) => setStepId(v)}
                 contactId={contactId || undefined}
                 onContactChange={(v) => setContactId(v)}
+                onOpenContact={props.onOpenContact}
                 onClose={close}
                 onChanged={refreshList}
                 refreshKey={version}

package/blocks/sequencer/components/step-editor.tsx

@@ -52,9 +52,9 @@ function LinkedinReadiness() {
   const c = conn.data?.data;
   if (conn.loading || conn.error || !c) return null;
   if (c.connected && c.is_token_valid !== false && !c.requires_manual_login)
-    return <p className="text-xs text-green-700">LinkedIn sender connected.</p>;
+    return <p className="text-xs text-positive-foreground">LinkedIn sender connected.</p>;
   return (
-    <p role="alert" className="text-xs text-amber-800">
+    <p role="alert" className="text-xs text-warning-foreground">
       LinkedIn is not ready to send. Reconnect the LinkedIn account in the {brand.linkLabel} app before launching.
     </p>
   );
@@ -72,13 +72,13 @@ export function StepEditor({ step, index, onChange, onRemove, disabled, classNam
   const phoneOptions = Array.isArray(data.phone_options) ? (data.phone_options as string[]) : [];
 
   return (
-    <fieldset disabled={disabled} className={`space-y-3 rounded border border-gray-200 p-3 ${className ?? ""}`} data-step-kind={step.kind}>
+    <fieldset disabled={disabled} className={`space-y-3 rounded border border-border p-3 ${className ?? ""}`} data-step-kind={step.kind}>
       <div className="flex items-center justify-between">
-        <legend className="text-sm font-semibold">
+        <legend className="text-sm font-medium">
           Step {index}: {KIND_LABEL[step.kind]}
         </legend>
         {onRemove ? (
-          <button type="button" className="text-xs text-red-700 hover:underline" onClick={onRemove}>
+          <button type="button" className="text-xs text-error-foreground hover:underline" onClick={onRemove}>
             Remove step
           </button>
         ) : null}
@@ -105,7 +105,7 @@ export function StepEditor({ step, index, onChange, onRemove, disabled, classNam
             Copy
             <select
               aria-label="Email copy"
-              className="ml-2 h-8 rounded border border-gray-300 px-1 text-sm"
+              className="ml-2 h-8 rounded border border-input px-1 text-sm"
               value={step.input_type}
               onChange={(e) => onChange({ ...step, dirty: true, input_type: e.target.value as InputType })}
             >
@@ -141,7 +141,7 @@ export function StepEditor({ step, index, onChange, onRemove, disabled, classNam
         <>
           <select
             aria-label="LinkedIn action"
-            className="h-8 rounded border border-gray-300 px-1 text-sm"
+            className="h-8 rounded border border-input px-1 text-sm"
             value={action}
             onChange={(e) => set({ linkedin_action_type: e.target.value })}
           >
@@ -160,7 +160,7 @@ export function StepEditor({ step, index, onChange, onRemove, disabled, classNam
               onChange={(e) => set({ [copyKey]: e.target.value })}
             />
           ) : (
-            <p className="text-xs text-gray-500">This action sends no text.</p>
+            <p className="text-xs text-muted-foreground">This action sends no text.</p>
           )}
           {action === "INMAIL" ? (
             <Input
@@ -176,7 +176,7 @@ export function StepEditor({ step, index, onChange, onRemove, disabled, classNam
 
       {step.kind === "call" || step.kind === "task" ? (
         <div className="space-y-1 text-sm">
-          <p className="text-gray-600">
+          <p className="text-muted-foreground">
             {step.kind === "call" ? "An automatic call attempt." : "Creates a call task for a person to work in the dialer."}
           </p>
           <div className="flex flex-wrap gap-3">
@@ -199,12 +199,12 @@ export function StepEditor({ step, index, onChange, onRemove, disabled, classNam
       ) : null}
 
       {broken ? (
-        <p role="alert" className="text-xs text-amber-800">
+        <p role="alert" className="text-xs text-warning-foreground">
           A {"{{merge token}}"} is not closed. Unclosed tokens are deleted when the email sends.
         </p>
       ) : null}
       {issues.length > 0 ? (
-        <ul className="text-xs text-red-700" aria-label="Step problems">
+        <ul className="text-xs text-error-foreground" aria-label="Step problems">
           {issues.map((i) => (
             <li key={i}>{i}</li>
           ))}

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

@@ -142,11 +142,11 @@ export function statusGroup(status: string | null | undefined): "draft" | "live"
 }
 
 export const STATUS_CLASS: Record<ReturnType<typeof statusGroup>, string> = {
-  draft: "bg-gray-100 text-gray-700",
-  live: "bg-green-100 text-green-800",
-  paused: "bg-amber-100 text-amber-800",
-  ended: "bg-slate-100 text-slate-600",
-  busy: "bg-blue-100 text-blue-800",
+  draft: "bg-muted text-foreground",
+  live: "bg-positive text-positive-foreground",
+  paused: "bg-warning text-warning-foreground",
+  ended: "bg-muted text-muted-foreground",
+  busy: "bg-info text-info-foreground",
 };
 
 export function listOf<T>(envelope: unknown): T[] {

package/blocks/social-ads/README.md

@@ -137,3 +137,11 @@ Ask the person: campaign daily budget, dates and destination URL (always typed b
 | updateAdCreative | PATCH /ad-creatives/{creative_id} | write | CreativeGallery |
 | updateAudienceSync | PATCH /audience-syncs/{config_id} | external | AudienceSync |
 | updateSocialPost | PATCH /social/posts/{post_id} | write | PostComposer |
+
+## Depth added (C7c)
+
+- `CampaignDetail` gains **Ads** (`CampaignAds`: list, edit, pause or activate, archive, add; all external or destructive confirms) and **Edit** (`CampaignEditor`: name, daily budget, end date, spend cap, pause or resume; previewed, then an external confirm; fields the platform refuses are disabled with its reason).
+- `CreativeDetail` gains **AI tools** (`CreativeTools`: edit by instruction, rewrite a field with undo, review and apply, other sizes, retry, move to draft, save as template; billable passes are confirmed) and **Revisions** (`CreativeRevisions`). `CreativeGallery` loads past 50 and has a **Concept board** (`CreativeConcepts`, billable confirm).
+- `SocialScreen` gains **Ideas** (`SocialIdeas`, Draft a post opens the composer with the brief), **Performance** (`SocialPerformance`), a per-post Performance tab, and Disconnect on an account (destructive confirm).
+
+Not covered (and why): `createAdCreativeSet` and `readAdCreativeThroughPersona` need persona pickers; video clips, image-point edits, reskin, set-image and library ops need pickers or media editing; `uploadAdImage` is multipart; social autopilot (`saveSocialAutopilot`) auto-publishes and engagers (`addSocialEngagersToAudience`, `enrollSocialEngagers`) need list and sequence pickers; `getAudienceSync` is already covered by the list read.