@graph8/sdk 0.370.0 → 0.374.0

package/blocks/sequencer/block.json

@@ -2,12 +2,16 @@
   "$schema": "../block.schema.json",
   "id": "sequencer",
   "title": "Sequencer",
-  "summary": "Build multi-channel outreach sequences (email, LinkedIn, calls), launch and pause them, enroll contacts, and read performance.",
+  "summary": "Build multi-channel outreach sequences, launch, pause, rename and delete them, start from templates, get AI help with copy, enroll and withdraw contacts, and read performance.",
   "features": [
     "multi-channel step builder with send-time rule checks",
     "launch, pause, resume, duplicate and archive with recipient-count confirmation",
     "enroll contacts with deliverability warning",
-    "per-step stats, skip reasons and per-contact control"
+    "per-step stats, skip reasons and per-contact control",
+    "rename, edit, sync and delete a sequence (confirmed)",
+    "sequence and step templates, and AI-drafted step templates (billable, confirmed)",
+    "AI help on a step: improve instructions, preview a draft for a contact (billable, confirmed)",
+    "remove a sender from a sequence, withdraw one contact"
   ],
   "dependsOn": [
     "lists",
@@ -18,14 +22,28 @@
     "add_sequence_channels_sequences__sequence_id__channels_post",
     "add_sequence_steps_sequences__sequence_id__steps_post",
     "archive_sequence_sequences__sequence_id__archive_post",
+    "archive_sequence_template_sequencer_templates_sequences__sequence_template_id__archive_patch",
+    "archive_step_template_sequencer_templates_steps__step_template_id__archive_patch",
     "create_sequence_sequences_post",
+    "create_sequence_template_sequencer_templates_sequences_post",
+    "create_step_template_sequencer_templates_steps_post",
+    "delete_sequence_sequences__sequence_id__delete",
     "delete_sequence_step_sequences__sequence_id__steps__step_id__delete",
+    "draft_email_sequencer_content_email_generate_post",
+    "draft_linkedin_message_sequencer_content_linkedin_generate_post",
     "duplicate_sequence_sequences__sequence_id__duplicate_post",
+    "estimate_email_draft_sequencer_content_email_estimate_post",
+    "generate_step_templates_sequencer_templates_steps_generate_post",
+    "get_campaign_campaigns__campaign_id__get",
+    "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",
     "get_sequence_analytics_sequences__sequence_id__analytics_get",
     "get_sequence_sequences__sequence_id__get",
     "get_sequence_stats_sequences__sequence_id__stats_get",
+    "improve_step_instruction_sequencer_content_instructions_improve_post",
+    "link_sequence_campaign_sequences__sequence_id__campaign_put",
+    "list_campaigns_for_picker_campaigns_picker_get",
     "list_contacts_contacts_get",
     "list_linkedin_accounts_sequencer_channels_linkedin_accounts_get",
     "list_lists_lists_get",
@@ -33,15 +51,25 @@
     "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_sequence_templates_sequencer_templates_sequences_get",
     "list_sequencer_phone_numbers_sequencer_channels_phone_numbers_get",
+    "list_sequencer_textual_agents_sequencer_agents_textual_get",
     "list_sequences_sequences_get",
+    "list_step_templates_sequencer_templates_steps_get",
     "pause_sequence_contact_sequences__sequence_id__contacts__contact_id__pause_post",
     "pause_sequence_sequences__sequence_id__pause_post",
     "preview_sequence_sequences__sequence_id__preview_get",
+    "remove_sequence_channel_sequences__sequence_id__channels__sequence_channel_id__delete",
     "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"
+    "sync_sequence_sequences__sequence_id__sync_post",
+    "unlink_sequence_campaign_sequences__sequence_id__campaign_delete",
+    "update_sequence_sequences__sequence_id__patch",
+    "update_sequence_step_sequences__sequence_id__steps__step_id__patch",
+    "update_sequence_template_sequencer_templates_sequences__sequence_template_id__patch",
+    "update_step_template_sequencer_templates_steps__step_template_id__patch",
+    "withdraw_contacts_from_sequences_contacts_withdraw_from_sequences_post"
   ],
   "components": [
     {
@@ -92,7 +120,7 @@
     {
       "name": "StepEditor",
       "file": "components/step-editor.tsx",
-      "purpose": "Controlled form for one step with the rules the API only enforces at send time; shows LinkedIn sender readiness.",
+      "purpose": "Controlled form for one step with the rules the API only enforces at send time; shows LinkedIn sender readiness. Optional renderAssist slot for AI help.",
       "operations": [
         "get_outreach_connection_integrations_linkedin_outreach_connection_get"
       ],
@@ -131,10 +159,116 @@
         "external"
       ]
     },
+    {
+      "name": "SequenceEditForm",
+      "file": "components/sequence-edit-form.tsx",
+      "purpose": "Rename a sequence and change its settings (description, stop on reply, same thread, new contacts). Loads the record first, saves only the changed fields, and confirms before changing a sequence that may be live.",
+      "operations": [
+        "get_sequence_sequences__sequence_id__get",
+        "update_sequence_sequences__sequence_id__patch"
+      ],
+      "tiers": [
+        "read",
+        "external"
+      ]
+    },
+    {
+      "name": "SequenceManageActions",
+      "file": "components/sequence-manage-actions.tsx",
+      "purpose": "Edit, sync the audience list (confirmed), save as template and delete (confirmed) for one sequence.",
+      "operations": [
+        "create_sequence_template_sequencer_templates_sequences_post",
+        "delete_sequence_sequences__sequence_id__delete",
+        "list_sequence_steps_sequences__sequence_id__steps_get",
+        "sync_sequence_sequences__sequence_id__sync_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "SequenceSendersPanel",
+      "file": "components/sequence-senders-panel.tsx",
+      "purpose": "The senders (mailboxes, numbers, LinkedIn accounts) a sequence sends from, with remove (confirmed).",
+      "operations": [
+        "list_sequence_channels_sequences__sequence_id__channels_get",
+        "remove_sequence_channel_sequences__sequence_id__channels__sequence_channel_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "destructive"
+      ]
+    },
+    {
+      "name": "SequenceTemplates",
+      "file": "components/sequence-templates.tsx",
+      "purpose": "Sequence templates: list, create, edit (only changes are sent), archive (confirmed) and restore, and use one to start a new sequence.",
+      "operations": [
+        "archive_sequence_template_sequencer_templates_sequences__sequence_template_id__archive_patch",
+        "create_sequence_template_sequencer_templates_sequences_post",
+        "list_sequence_templates_sequencer_templates_sequences_get",
+        "update_sequence_template_sequencer_templates_sequences__sequence_template_id__patch"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
+    },
+    {
+      "name": "StepTemplates",
+      "file": "components/step-templates.tsx",
+      "purpose": "Step templates (also exports StepTemplatePicker): list, create, edit, archive (confirmed), restore, and have an agent draft a batch (billable, confirmed).",
+      "operations": [
+        "archive_step_template_sequencer_templates_steps__step_template_id__archive_patch",
+        "create_step_template_sequencer_templates_steps_post",
+        "generate_step_templates_sequencer_templates_steps_generate_post",
+        "list_sequencer_textual_agents_sequencer_agents_textual_get",
+        "list_step_templates_sequencer_templates_steps_get",
+        "update_step_template_sequencer_templates_steps__step_template_id__patch"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "billable",
+        "destructive"
+      ]
+    },
+    {
+      "name": "StepAiAssist",
+      "file": "components/step-ai-assist.tsx",
+      "purpose": "AI help for one email or LinkedIn step: improve the instructions and preview a draft for one contact; each AI call is billable and confirmed (the email draft shows its credit estimate), nothing is sent.",
+      "operations": [
+        "draft_email_sequencer_content_email_generate_post",
+        "draft_linkedin_message_sequencer_content_linkedin_generate_post",
+        "estimate_email_draft_sequencer_content_email_estimate_post",
+        "improve_step_instruction_sequencer_content_instructions_improve_post",
+        "list_contacts_contacts_get",
+        "list_sequencer_textual_agents_sequencer_agents_textual_get"
+      ],
+      "tiers": [
+        "read",
+        "billable"
+      ]
+    },
+    {
+      "name": "WithdrawContactButton",
+      "file": "components/enrollment-withdraw.tsx",
+      "purpose": "Take one contact out of one sequence, recording the outcome (removed, completed, not interested); confirmed.",
+      "operations": [
+        "withdraw_contacts_from_sequences_contacts_withdraw_from_sequences_post"
+      ],
+      "tiers": [
+        "write"
+      ]
+    },
     {
       "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.",
+      "purpose": "Finished sequences page: status stats and filter, list with launch/pause/resume, new-sequence sheet, templates, detail with results, steps, senders, edit, sync, delete and enroll-contacts.",
       "operations": [
         "list_sequences_sequences_get"
       ],
@@ -145,7 +279,7 @@
     {
       "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).",
+      "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). Also edit, sync audience, save as template, delete and a Senders tab.",
       "operations": [
         "get_sequence_sequences__sequence_id__get",
         "preview_sequence_sequences__sequence_id__preview_get",
@@ -189,6 +323,46 @@
         "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"
+      ]
+    },
+    {
+      "name": "SequenceCampaignLink",
+      "file": "components/sequence-campaign-link.tsx",
+      "purpose": "Which campaign a sequence belongs to: the linked campaign with an Open campaign button and Unlink, or a picker to link one. Drop into SequencesScreen.renderDetailActions.",
+      "operations": [
+        "get_campaign_campaigns__campaign_id__get",
+        "list_campaigns_for_picker_campaigns_picker_get",
+        "link_sequence_campaign_sequences__sequence_id__campaign_put",
+        "unlink_sequence_campaign_sequences__sequence_id__campaign_delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "destructive"
+      ]
     }
   ],
   "hooks": [],
@@ -196,6 +370,10 @@
     {
       "file": "lib/sequencer-utils.ts",
       "purpose": "Step kinds and the draft-to-API mapping, send-time rule checks, status helpers and envelope readers."
+    },
+    {
+      "file": "lib/sequencer-manage.ts",
+      "purpose": "Edit-only-what-changed diffs, sequence and step template readers and bodies, contact and agent readers for AI drafting."
     }
   ],
   "recipes": [
@@ -243,6 +421,7 @@
   "scopes": [
     "campaigns:read",
     "contacts:read",
+    "contacts:write",
     "integrations:read",
     "lists:read",
     "sequences:delete",
@@ -285,6 +464,21 @@
       "decision": "Audience list",
       "default": "Required when creating a draft (the API cannot set it later, and a sequence without one cannot launch)",
       "askHuman": false
+    },
+    {
+      "decision": "Deleting versus archiving a sequence",
+      "default": "Both are the API's soft delete (the sequence stops and is hidden, and cannot be restored through the API). Delete and Archive are both offered and both confirmed",
+      "askHuman": false
+    },
+    {
+      "decision": "Reordering the steps of a saved sequence",
+      "default": "Not offered: the API has no reorder operation and a saved step has no order field to patch. Unsaved steps can be moved before they are added",
+      "askHuman": false
+    },
+    {
+      "decision": "Who may spend credits on AI drafts",
+      "default": "Every AI call (improve instructions, preview a draft, draft step templates) goes through a confirm dialog that says it uses credits; the email draft shows the exact estimate first",
+      "askHuman": false
     }
   ],
   "peerDependencies": {

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

@@ -46,7 +46,7 @@ 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>
   );
@@ -81,7 +81,7 @@ export function EnrollDialog({ open, sequenceId, sequenceName, contactIds, listI
           <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/enrollment-withdraw.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+/**
+ * WithdrawContactButton: take ONE contact out of ONE sequence for good (they stop receiving its steps), recording why.
+ *
+ * SDK operations:
+ *   POST /contacts/withdraw-from-sequences  (contacts.withdrawContactsFromSequences)  tier `write`, but it ends the contact's
+ *   place in the sequence, so it asks first through ConfirmSpendDialog as a DESTRUCTIVE action. The body is always the one
+ *   `sequence_id` and the one `contact_id`; `remove_all` (every sequence the contact is in) is never sent from here.
+ * The outcome to record is the person's choice: removed, completed, or not interested.
+ */
+import { useState } from "react";
+import { UserMinus } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+
+export interface WithdrawContactButtonProps {
+  sequenceId: string;
+  contactId: number;
+  /** Shown in the dialog. */
+  contactName?: string;
+  /** Called after the contact was withdrawn so the list can refresh. */
+  onWithdrawn?: () => void;
+  className?: string;
+}
+
+const OUTCOMES = [
+  { value: "removed", label: "Removed (no reason recorded)" },
+  { value: "completed", label: "Completed (they did what we wanted)" },
+  { value: "not_interested", label: "Not interested" },
+] as const;
+
+export function WithdrawContactButton({ sequenceId, contactId, contactName, onWithdrawn, className }: WithdrawContactButtonProps) {
+  const [open, setOpen] = useState(false);
+  const [outcome, setOutcome] = useState<(typeof OUTCOMES)[number]["value"]>("removed");
+  const withdraw = useG8Mutation(async () => {
+    await g8Post("/contacts/withdraw-from-sequences", { sequence_id: sequenceId, contact_ids: [contactId], target_state: outcome, remove_all: false });
+    setOpen(false);
+    onWithdrawn?.();
+  }, { invalidates: ["sequences"], onError: () => setOpen(false) });
+  const who = contactName || `contact ${contactId}`;
+  return (
+    <span className={className}>
+      <Button size="sm" variant="ghost" onClick={() => setOpen(true)}><UserMinus className="mr-1 size-4" aria-hidden />Remove from sequence</Button>
+      {withdraw.error ? <ApiError error={withdraw.error} title="Could not remove the contact" /> : null}
+      <ConfirmSpendDialog
+        open={open}
+        tier="destructive"
+        title={`Remove ${who} from this sequence?`}
+        description={
+          <div className="space-y-2">
+            <p>They stop receiving its steps. They stay in your contacts and in every other sequence.</p>
+            <label className="block text-sm">Record it as
+              <select aria-label="Outcome" className="mt-1 h-9 w-full rounded-md border border-border bg-background px-2" value={outcome} onChange={(e) => setOutcome(e.target.value as typeof outcome)}>
+                {OUTCOMES.map((o) => <option key={o.value} value={o.value}>{o.label}</option>)}
+              </select>
+            </label>
+          </div>
+        }
+        confirmLabel="Remove from sequence"
+        affected={1}
+        confirming={withdraw.loading}
+        onConfirm={() => void withdraw.mutate(undefined)}
+        onCancel={() => setOpen(false)}
+      />
+    </span>
+  );
+}

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