@graph8/sdk 0.362.0 → 0.373.0

package/blocks/sequencer/block.json

@@ -14,35 +14,42 @@
     "mailboxes"
   ],
   "operations": [
-    "list_sequences_sequences_get",
-    "preview_sequence_sequences__sequence_id__preview_get",
-    "run_sequence_sequences__sequence_id__run_post",
-    "pause_sequence_sequences__sequence_id__pause_post",
-    "resume_sequence_sequences__sequence_id__resume_post",
-    "duplicate_sequence_sequences__sequence_id__duplicate_post",
+    "add_contacts_to_sequence_sequences__sequence_id__contacts_post",
+    "add_sequence_channels_sequences__sequence_id__channels_post",
+    "add_sequence_steps_sequences__sequence_id__steps_post",
     "archive_sequence_sequences__sequence_id__archive_post",
-    "list_mailboxes_mailboxes_get",
-    "list_lists_lists_get",
     "create_sequence_sequences_post",
-    "list_sequence_steps_sequences__sequence_id__steps_get",
-    "get_sequence_sequences__sequence_id__get",
-    "add_sequence_steps_sequences__sequence_id__steps_post",
-    "update_sequence_step_sequences__sequence_id__steps__step_id__patch",
     "delete_sequence_step_sequences__sequence_id__steps__step_id__delete",
+    "duplicate_sequence_sequences__sequence_id__duplicate_post",
+    "get_contact_sequences_contacts__contact_id__sequences_get",
     "get_outreach_connection_integrations_linkedin_outreach_connection_get",
     "get_safe_to_send_deliverability_safe_to_send_get",
-    "add_contacts_to_sequence_sequences__sequence_id__contacts_post",
-    "get_sequence_stats_sequences__sequence_id__stats_get",
     "get_sequence_analytics_sequences__sequence_id__analytics_get",
+    "get_sequence_sequences__sequence_id__get",
+    "get_sequence_stats_sequences__sequence_id__stats_get",
+    "list_contacts_contacts_get",
+    "list_linkedin_accounts_sequencer_channels_linkedin_accounts_get",
+    "list_lists_lists_get",
+    "list_mailboxes_mailboxes_get",
+    "list_sequence_channels_sequences__sequence_id__channels_get",
     "list_sequence_contacts_sequences__sequence_id__contacts_get",
+    "list_sequence_steps_sequences__sequence_id__steps_get",
+    "list_sequencer_phone_numbers_sequencer_channels_phone_numbers_get",
+    "list_sequences_sequences_get",
     "pause_sequence_contact_sequences__sequence_id__contacts__contact_id__pause_post",
-    "resume_sequence_contact_sequences__sequence_id__contacts__contact_id__resume_post"
+    "pause_sequence_sequences__sequence_id__pause_post",
+    "preview_sequence_sequences__sequence_id__preview_get",
+    "resume_sequence_contact_sequences__sequence_id__contacts__contact_id__resume_post",
+    "resume_sequence_sequences__sequence_id__resume_post",
+    "run_sequence_sequences__sequence_id__run_post",
+    "update_sequence_step_sequences__sequence_id__steps__step_id__patch",
+    "withdraw_contacts_from_sequences_contacts_withdraw_from_sequences_post"
   ],
   "components": [
     {
       "name": "SequenceList",
       "file": "components/sequence-list.tsx",
-      "purpose": "All sequences with status; launch (after a copy preview), pause, resume, duplicate and archive, each confirmed with the recipient count.",
+      "purpose": "All sequences with status; launch (after a preview that checks every step's copy and sender; a launch that would 400 is refused with the reasons), pause, resume, duplicate and archive, each confirmed with the recipient count.",
       "operations": [
         "list_sequences_sequences_get",
         "preview_sequence_sequences__sequence_id__preview_get",
@@ -62,7 +69,7 @@
     {
       "name": "SequenceBuilder",
       "file": "components/sequence-builder.tsx",
-      "purpose": "Build a draft with email, LinkedIn, call and call-task steps and a sender, or edit the steps of an existing sequence.",
+      "purpose": "Build a draft with email, LinkedIn, AI call and call-task steps, a required audience list and a sender for every step type (mailbox, Voice AI or dialer number, LinkedIn account), or edit an existing sequence's steps and attach the senders new steps need.",
       "operations": [
         "list_mailboxes_mailboxes_get",
         "list_lists_lists_get",
@@ -71,7 +78,11 @@
         "get_sequence_sequences__sequence_id__get",
         "add_sequence_steps_sequences__sequence_id__steps_post",
         "update_sequence_step_sequences__sequence_id__steps__step_id__patch",
-        "delete_sequence_step_sequences__sequence_id__steps__step_id__delete"
+        "delete_sequence_step_sequences__sequence_id__steps__step_id__delete",
+        "list_sequencer_phone_numbers_sequencer_channels_phone_numbers_get",
+        "list_linkedin_accounts_sequencer_channels_linkedin_accounts_get",
+        "list_sequence_channels_sequences__sequence_id__channels_get",
+        "add_sequence_channels_sequences__sequence_id__channels_post"
       ],
       "tiers": [
         "read",
@@ -121,6 +132,89 @@
         "write",
         "external"
       ]
+    },
+    {
+      "name": "SequencesScreen",
+      "file": "components/sequences-screen.tsx",
+      "purpose": "Finished sequences page: status stats and filter, list with launch/pause/resume, new-sequence sheet, detail with results, steps and enroll-contacts.",
+      "operations": [
+        "list_sequences_sequences_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "SequenceDetail",
+      "file": "components/sequence-detail.tsx",
+      "purpose": "One sequence, complete: every field, tabs for steps, contacts and results; launch (refused with the reasons when a step has no sender or the copy would block it), pause, resume, duplicate, archive and enroll (confirmed).",
+      "operations": [
+        "get_sequence_sequences__sequence_id__get",
+        "preview_sequence_sequences__sequence_id__preview_get",
+        "run_sequence_sequences__sequence_id__run_post",
+        "pause_sequence_sequences__sequence_id__pause_post",
+        "resume_sequence_sequences__sequence_id__resume_post",
+        "duplicate_sequence_sequences__sequence_id__duplicate_post",
+        "archive_sequence_sequences__sequence_id__archive_post",
+        "list_contacts_contacts_get"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "SequenceStepsPanel",
+      "file": "components/sequence-steps-panel.tsx",
+      "purpose": "The steps of a sequence as records: channel, wait, progress; open one for every field and counts, then edit.",
+      "operations": [
+        "list_sequence_steps_sequences__sequence_id__steps_get",
+        "get_sequence_stats_sequences__sequence_id__stats_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "SequenceEnrollments",
+      "file": "components/sequence-enrollments.tsx",
+      "purpose": "Enrolled contacts of a sequence as records: state, step, the contact itself; pause directly, resume confirmed.",
+      "operations": [
+        "list_sequence_contacts_sequences__sequence_id__contacts_get",
+        "pause_sequence_contact_sequences__sequence_id__contacts__contact_id__pause_post",
+        "resume_sequence_contact_sequences__sequence_id__contacts__contact_id__resume_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external"
+      ]
+    },
+    {
+      "name": "AddToSequenceButton",
+      "file": "components/add-to-sequence-button.tsx",
+      "purpose": "\"Add to sequence\" for any selection of contacts: pick a live sequence, then the enroll dialog (preflight and confirmation) enrolls them. Drops into ContactsScreen bulk and detail slots.",
+      "operations": [
+        "list_sequences_sequences_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "RecordSequencesTab",
+      "file": "components/record-sequences-tab.tsx",
+      "purpose": "The sequences one contact is or was enrolled in, with state and step, Add to sequence, and a confirmed Withdraw; an extraDetailTabs entry for ContactsScreen. Withdraw is a write-tier op (the validator derives tiers from the contract), confirmed anyway with the destructive-styled dialog because it stops outreach.",
+      "operations": [
+        "get_contact_sequences_contacts__contact_id__sequences_get",
+        "withdraw_contacts_from_sequences_contacts_withdraw_from_sequences_post"
+      ],
+      "tiers": [
+        "read",
+        "write"
+      ]
     }
   ],
   "hooks": [],
@@ -174,6 +268,8 @@
   ],
   "scopes": [
     "campaigns:read",
+    "contacts:read",
+    "contacts:write",
     "integrations:read",
     "lists:read",
     "sequences:delete",
@@ -206,9 +302,20 @@
       "decision": "Call steps and do-not-call numbers",
       "default": "Phone steps never dial do-not-call numbers",
       "askHuman": false
+    },
+    {
+      "decision": "Which senders a sequence gets",
+      "default": "One per step type the steps use: the picked mailbox (channel type from its source; Microsoft direct mailboxes are not offered), a Voice AI number for AI calls, a dialer number for call tasks, a LinkedIn account. The draft is not created without them",
+      "askHuman": false
+    },
+    {
+      "decision": "Audience list",
+      "default": "Required when creating a draft (the API cannot set it later, and a sequence without one cannot launch)",
+      "askHuman": false
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }

package/blocks/sequencer/components/add-to-sequence-button.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+/**
+ * AddToSequenceButton: "Add to sequence" for any selection of contacts. Opens a sheet with every live sequence,
+ * then the enroll dialog (which runs the sending preflight and asks the person to confirm before anything is sent).
+ * Drop it into ContactsScreen's `renderBulkActions` / `renderDetailActions`.
+ *
+ * SDK operations, in order:
+ *   1. listSequences   GET /sequences?page=&limit=100      (read; pages through the whole list, live ones only)
+ *   2. EnrollDialog: getSafeToSend, getSequence, addContactsToSequence   (external: confirmed in the dialog)
+ */
+
+import { useState } from "react";
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton } from "@graph8/sdk/ui";
+import { ListPlus } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { EnrollDialog } from "./enroll-dialog";
+import { listOf, statusGroup, type SequenceRow } from "../lib/sequencer-utils";
+
+/** Every active sequence, paging through the whole list (the API answers one page at a time). */
+async function activeSequences(signal: AbortSignal): Promise<SequenceRow[]> {
+  const out: SequenceRow[] = [];
+  for (let page = 1; page <= 50; page++) {
+    const env = await g8Get("/sequences", { page, limit: 100 }, { signal });
+    const rows = listOf<SequenceRow>(env);
+    out.push(...rows.filter((s) => statusGroup(s.status) === "live"));
+    const more = (env as { pagination?: { has_next?: boolean } }).pagination?.has_next;
+    if (!more || rows.length === 0) break;
+  }
+  return out;
+}
+
+export interface AddToSequenceButtonProps {
+  contactIds: number[];
+  onEnrolled?: () => void;
+  variant?: "outline" | "default";
+}
+
+/** Pick a sequence, then enroll the contacts in it. The enroll dialog shows the sending preflight before anything is sent. */
+export function AddToSequenceButton({ contactIds, onEnrolled, variant = "outline" }: AddToSequenceButtonProps) {
+  const [step, setStep] = useState<"closed" | "pick" | "enroll">("closed");
+  const [sequenceId, setSequenceId] = useState("");
+  const sequences = useG8Query(activeSequences, [], { enabled: step === "pick" });
+  const chosen = (sequences.data ?? []).find((s) => s.id === sequenceId);
+  return (
+    <>
+      <Button size="sm" variant={variant} disabled={contactIds.length === 0} onClick={() => { setSequenceId(""); setStep("pick"); }}>
+        <ListPlus className="mr-1 size-4" aria-hidden />
+        Add to sequence
+      </Button>
+      <Sheet open={step === "pick"} onOpenChange={(o) => { if (!o) setStep("closed"); }}>
+        <SheetContent className="w-full sm:max-w-md">
+          <SheetHeader>
+            <SheetTitle>Add to sequence</SheetTitle>
+            <SheetDescription>{contactIds.length === 1 ? "1 contact" : `${contactIds.length} contacts`} will be enrolled in the sequence you pick.</SheetDescription>
+          </SheetHeader>
+          <div className="space-y-3 p-4">
+            {sequences.error ? <ApiError error={sequences.error} title="Could not load sequences" onRetry={() => void sequences.refetch()} /> : null}
+            {sequences.loading && !sequences.data ? <Skeleton className="h-9 w-full" aria-label="Loading sequences" /> : null}
+            {sequences.data && sequences.data.length === 0 ? <EmptyState compact title="No active sequences" description="Launch a sequence on the Sequences page first." /> : null}
+            {sequences.data && sequences.data.length > 0 ? (
+              <>
+                <label htmlFor="enroll-sequence" className="text-sm font-medium">Sequence</label>
+                <select id="enroll-sequence" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={sequenceId} onChange={(e) => setSequenceId(e.target.value)}>
+                  <option value="">Choose a sequence</option>
+                  {sequences.data.map((s) => <option key={s.id} value={s.id}>{s.name || s.id}</option>)}
+                </select>
+                <Button disabled={!sequenceId} onClick={() => setStep("enroll")}>Continue</Button>
+              </>
+            ) : null}
+          </div>
+        </SheetContent>
+      </Sheet>
+      {step === "enroll" && chosen ? (
+        <EnrollDialog open sequenceId={chosen.id} sequenceName={chosen.name ?? undefined} contactIds={contactIds} onClose={() => setStep("closed")} onEnrolled={() => { setStep("closed"); onEnrolled?.(); }} />
+      ) : null}
+    </>
+  );
+}

package/blocks/sequencer/components/enroll-dialog.tsx

@@ -18,12 +18,14 @@
  */
 
 import { useRef } from "react";
+import type { ReactNode } from "react";
 import { g8Get, g8Post } from "@/g8/lib/g8-client";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { newIdempotencyKey, objectOf } from "../lib/sequencer-utils";
+import { pluralWord } from "@/g8/lib/plural";
 
 export interface EnrollDialogProps {
   open: boolean;
@@ -35,6 +37,8 @@ export interface EnrollDialogProps {
   listId?: number;
   onClose: () => void;
   onEnrolled?: (result: { contactsAffected: number }) => void;
+  /** Extra line shown in the confirm (for example that only part of a large list is included). */
+  note?: ReactNode;
 }
 
 function Verdict() {
@@ -42,16 +46,17 @@ function Verdict() {
   const v = objectOf(verdict.data);
   if ((v.safe_to_send ?? v.safe) !== false) return null;
   return (
-    <p role="alert" className="mt-2 rounded bg-amber-50 p-2 text-amber-900">
+    <p role="alert" className="mt-2 rounded bg-warning p-2 text-warning-foreground">
       Deliverability warning: {typeof v.reason === "string" ? v.reason : "sending is not recommended right now."}
     </p>
   );
 }
 
-export function EnrollDialog({ open, sequenceId, sequenceName, contactIds, listId, onClose, onEnrolled }: EnrollDialogProps) {
+export function EnrollDialog({ open, sequenceId, sequenceName, contactIds, listId, onClose, onEnrolled, note }: EnrollDialogProps) {
   const key = useRef<{ sig: string; value: string } | null>(null);
   const sequence = useG8Query((signal) => g8Get(`/sequences/${sequenceId}`, undefined, { signal }), [sequenceId], {
     enabled: open && listId == null,
+    key: ["sequences", "detail", sequenceId],
   });
   const resolvedList = listId ?? (objectOf(sequence.data).associated_list_id as number | undefined);
 
@@ -62,7 +67,7 @@ export function EnrollDialog({ open, sequenceId, sequenceName, contactIds, listI
     const res = objectOf(await g8Post(`/sequences/${sequenceId}/contacts`, body, { idempotencyKey: key.current.value }));
     onEnrolled?.({ contactsAffected: Number(res.contacts_affected ?? 0) });
     onClose();
-  });
+  }, { invalidates: [["sequences", "contacts", sequenceId], ["sequences", "stats", sequenceId]] });
 
   if (!open) return null;
   const missingList = listId == null && !sequence.loading && resolvedList == null;
@@ -70,12 +75,13 @@ export function EnrollDialog({ open, sequenceId, sequenceName, contactIds, listI
     <ConfirmSpendDialog
       open
       tier="external"
-      title={`Enroll ${contactIds.length.toLocaleString()} contact${contactIds.length === 1 ? "" : "s"} in "${sequenceName ?? sequenceId}"`}
+      title={`Enroll ${contactIds.length.toLocaleString()} ${pluralWord(contactIds.length, "contact")} in "${sequenceName ?? sequenceId}"`}
       description={
         <div>
           <p>They start receiving this sequence's steps. Contacts already enrolled are skipped.</p>
+          {note ? <div className="mt-2">{note}</div> : null}
           {missingList ? (
-            <p role="alert" className="mt-2 text-red-700">
+            <p role="alert" className="mt-2 text-error-foreground">
               This sequence has no audience list. Pass the list these contacts came from as `listId`.
             </p>
           ) : null}

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>
+  );
+}