@graph8/sdk 0.370.0 → 0.374.0

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

@@ -34,9 +34,13 @@ 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 { StepAiAssist } from "./step-ai-assist";
 import { StepEditor } from "./step-editor";
+import { StepTemplatePicker } from "./step-templates";
 import {
   fromApiStep,
   KIND_LABEL,
@@ -63,6 +67,10 @@ export interface SequenceBuilderProps {
   /** Optional owner email sent as `user_email` on create. */
   ownerEmail?: string;
   onSaved?: (sequenceId: string) => void;
+  /** New sequence only: start with this name (for example from a template). */
+  initialName?: string;
+  /** New sequence only: start with these unsaved steps (for example from a template). Sender and audience are still asked for. */
+  initialSteps?: DraftStep[];
   className?: string;
 }
 
@@ -102,11 +110,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 } {
@@ -134,16 +139,17 @@ function describe(p: Pending, live: boolean): { tier: ConfirmTier; title: string
   };
 }
 
-export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved, className }: SequenceBuilderProps) {
+export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved, initialName, initialSteps, className }: SequenceBuilderProps) {
   const brand = useBrand();
   const editing = Boolean(sequenceId);
-  const [name, setName] = useState("");
+  const [name, setName] = useState(initialName ?? "");
   const [mailboxId, setMailboxId] = useState("");
   const [aiPhoneId, setAiPhoneId] = useState("");
   const [dialerPhoneId, setDialerPhoneId] = useState("");
   const [linkedinId, setLinkedinId] = useState("");
   const [listId, setListId] = useState(defaultListId ? String(defaultListId) : "");
-  const [steps, setSteps] = useState<DraftStep[]>([]);
+  const [steps, setSteps] = useState<DraftStep[]>(() => (sequenceId ? [] : (initialSteps ?? [])));
+  const [pickingTemplate, setPickingTemplate] = useState(false);
   const [loadedFor, setLoadedFor] = useState<string | null>(null);
   const [pending, setPending] = useState<Pending | null>(null);
   const [saved, setSaved] = useState<string | null>(null);
@@ -157,8 +163,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 +328,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 +380,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();
           }}
@@ -393,6 +399,7 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
               index={i + 1}
               onChange={(next) => setSteps((all) => all.map((x) => (x.key === s.key ? next : x)))}
               onRemove={() => (s.id ? setPending({ kind: "delete", step: s }) : setSteps((all) => all.filter((x) => x.key !== s.key)))}
+              renderAssist={(step, change) => <StepAiAssist step={step} onChange={change} sequenceId={sequenceId} stepOrder={i + 1} />}
             />
             <div className="flex gap-2 text-xs">
               {!s.id ? (
@@ -422,7 +429,9 @@ export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved
             Add {KIND_LABEL[k].split(" ").map((w) => (/^[A-Z]{2,}$/.test(w) ? w : w.toLowerCase())).join(" ")}
           </Button>
         ))}
+        <Button size="sm" variant="ghost" onClick={() => setPickingTemplate((p) => !p)}>{pickingTemplate ? "Hide step templates" : "From a step template"}</Button>
       </div>
+      {pickingTemplate ? <StepTemplatePicker onPick={(step) => { setSteps((s) => [...s, step]); setPickingTemplate(false); }} /> : null}
 
       {editing ? (
         <Button
@@ -449,7 +458,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-campaign-link.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+/**
+ * SequenceCampaignLink: which campaign a sequence belongs to. Shows the linked campaign with an "Open campaign"
+ * button, lets you unlink it, or, when there is none, pick a campaign and link it. Use it in
+ * `SequencesScreen.renderDetailActions` (the row it passes is the full sequence, so it carries the campaign id):
+ *   renderDetailActions={(s) => <SequenceCampaignLink sequence={s} onOpenCampaign={(id) => router.push(`/campaigns?id=${id}`)} />}
+ *
+ * SDK operations, in order:
+ *   1. getCampaign             GET    /campaigns/{id}              (read; the linked campaign's name)
+ *      listCampaignsForPicker  GET    /campaigns/picker            (read; the choices, only while the sequence has no campaign)
+ *   2. linkSequenceCampaign    PUT    /sequences/{id}/campaign     (write)
+ *   3. unlinkSequenceCampaign  DELETE /sequences/{id}/campaign     (DESTRUCTIVE tier -> ConfirmSpendDialog; the campaign is kept)
+ * Linking never replaces silently: while a campaign is linked, the picker is hidden, so you unlink first.
+ */
+
+import { useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ExternalLink, Link2, Unlink } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Put } from "@/g8/lib/g8-client";
+import { listOf, objectOf } from "../lib/sequencer-utils";
+
+export interface SequenceCampaignLinkProps {
+  /** The full sequence (from `renderDetailActions`): its id and `campaign_builder_campaign_id`. */
+  sequence: { id: string; name?: string | null; campaign_builder_campaign_id?: string | null };
+  /** Route to the campaign in your app. Without it the campaign's name is shown without a button. */
+  onOpenCampaign?: (campaignId: string) => void;
+}
+
+interface Choice { id: string; name?: string | null }
+
+export function SequenceCampaignLink({ sequence, onOpenCampaign }: SequenceCampaignLinkProps) {
+  const linked = sequence.campaign_builder_campaign_id ? String(sequence.campaign_builder_campaign_id) : "";
+  const [open, setOpen] = useState(false);
+  const [choice, setChoice] = useState("");
+  const [confirm, setConfirm] = useState(false);
+  const campaign = useG8Query((signal) => g8Get(`/campaigns/${encodeURIComponent(linked)}`, undefined, { signal }), [linked], { enabled: Boolean(linked), key: ["campaigns", "sequence-link", linked] });
+  const choices = useG8Query((signal) => g8Get("/campaigns/picker", undefined, { signal }), [], { enabled: open && !linked, key: ["sequences", "campaign-choices"] });
+  const refresh = [["sequences", "detail", sequence.id], ["sequences", "list"]] as const;
+  const link = useG8Mutation((id: string) => g8Put(`/sequences/${encodeURIComponent(sequence.id)}/campaign`, { campaign_id: id }), { invalidates: refresh, onSuccess: () => { setOpen(false); setChoice(""); } });
+  const unlink = useG8Mutation(async () => {
+    try { await g8Delete(`/sequences/${encodeURIComponent(sequence.id)}/campaign`); } catch (err) { if ((err as { status?: number }).status !== 404) throw err; }
+  }, { invalidates: refresh, onSuccess: () => setConfirm(false), onError: () => setConfirm(false) });
+
+  const name = (objectOf(campaign.data).name as string | undefined) || `Campaign ${linked}`;
+  return (
+    <>
+      {linked ? (
+        <>
+          {campaign.loading && !campaign.data ? <Skeleton className="h-8 w-28" aria-label="Loading campaign" /> : onOpenCampaign ? (
+            <Button size="sm" variant="outline" onClick={() => onOpenCampaign(linked)} aria-label={`Open campaign ${name}`}><ExternalLink className="mr-1 h-4 w-4" aria-hidden />Open campaign</Button>
+          ) : <span className="text-sm text-muted-foreground">Campaign: {name}</span>}
+          <Button size="sm" variant="ghost" onClick={() => setConfirm(true)}><Unlink className="mr-1 h-4 w-4" aria-hidden />Unlink campaign</Button>
+        </>
+      ) : open ? (
+        <span className="flex items-center gap-2">
+          {choices.error ? <ApiError error={choices.error} title="Could not load campaigns" onRetry={() => void choices.refetch()} /> : (
+            <select aria-label="Campaign to link" className="h-8 rounded-md border bg-background px-2 text-sm" value={choice} onChange={(e) => setChoice(e.target.value)}>
+              <option value="">{choices.loading && !choices.data ? "Loading campaigns" : listOf<Choice>(choices.data).length ? "Choose a campaign" : "No campaigns yet"}</option>
+              {listOf<Choice>(choices.data).map((c) => <option key={c.id} value={c.id}>{c.name ?? c.id}</option>)}
+            </select>
+          )}
+          <Button size="sm" disabled={!choice} loading={link.loading} onClick={() => void link.mutate(choice)}>Link</Button>
+          <Button size="sm" variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
+        </span>
+      ) : (
+        <Button size="sm" variant="outline" onClick={() => setOpen(true)}><Link2 className="mr-1 h-4 w-4" aria-hidden />Link to campaign</Button>
+      )}
+      {link.error ? <ApiError error={link.error} title="Could not link the campaign" onRetry={link.reset} /> : null}
+      {unlink.error ? <ApiError error={unlink.error} title="Could not unlink the campaign" onRetry={unlink.reset} /> : null}
+      <ConfirmSpendDialog open={confirm} tier="destructive" title={`Unlink "${sequence.name ?? "this sequence"}" from ${name}?`} description="The campaign and the sequence are both kept. Only the tie between them is removed." confirmLabel="Unlink" affected={1} confirming={unlink.loading} onCancel={() => setConfirm(false)} onConfirm={() => void unlink.mutate(undefined)} />
+    </>
+  );
+}

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

@@ -17,6 +17,8 @@
  *   5. archiveSequence    POST /sequences/{id}/archive    (destructive: confirmed)
  *   Enroll contacts: EnrollSheet (ListPicker + ContactTable, or the whole list) then EnrollDialog (external: confirmed).
  *   Steps, Contacts and Results tabs compose SequenceStepsPanel, SequenceEnrollments and SequenceStats.
+ *   Manage (SequenceManageActions): edit and rename (external, confirmed), sync the audience (external, confirmed), save as
+ *   template, delete (destructive, confirmed). The Senders tab (SequenceSendersPanel) lists the senders and removes one (destructive, confirmed).
  */
 
 import { useState } from "react";
@@ -39,6 +41,8 @@ import { fieldItems, launchCheck, listOf, objectOf, statusGroup } from "../lib/s
 import type { SequenceRow } from "../lib/sequencer-utils";
 import { EnrollDialog } from "./enroll-dialog";
 import { SequenceEnrollments } from "./sequence-enrollments";
+import { SequenceManageActions } from "./sequence-manage-actions";
+import { SequenceSendersPanel } from "./sequence-senders-panel";
 import { SequenceStats } from "./sequence-stats";
 import { SequenceStepsPanel } from "./sequence-steps-panel";
 import { pluralWord } from "@/g8/lib/plural";
@@ -143,6 +147,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;
@@ -201,6 +207,7 @@ export function SequenceDetail(props: SequenceDetailProps) {
           <Button size="sm" variant="outline" onClick={() => setEnrolling(true)}><UserPlus className="mr-1 h-4 w-4" aria-hidden /> Enroll contacts</Button>
           <Button size="sm" variant="ghost" aria-label="Duplicate sequence" loading={duplicate.loading} onClick={() => void duplicate.mutate(undefined)}><Copy className="h-4 w-4" aria-hidden /></Button>
           {group !== "ended" ? <Button size="sm" variant="ghost" onClick={() => void prepare.mutate("archive")}>Archive sequence</Button> : null}
+          <SequenceManageActions sequence={row} onChanged={changed} onDeleted={() => onClose?.()} />
           {props.renderActions?.(row)}
           {enrolling ? <EnrollSheet sequence={row} onClose={() => setEnrolling(false)} onEnrolled={() => { setEnrolling(false); setStatsKey((k) => k + 1); changed(); }} /> : null}
           {p ? (
@@ -211,7 +218,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 +257,8 @@ 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: "senders", label: "Senders", content: <SequenceSendersPanel sequenceId={id} onChanged={changed} /> },
         { 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-edit-form.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+/**
+ * SequenceEditForm: rename a sequence and change its own settings (description, stop on reply, same email thread, pick
+ * up new contacts).
+ *
+ * SDK operations, in order:
+ *   1. getSequence     GET   /sequences/{id}   (read)   the record the form is seeded from
+ *   2. updateSequence  PATCH /sequences/{id}   (EXTERNAL: tier `external`, because changing a live sequence changes what
+ *                       real people receive) -> ConfirmSpendDialog first, naming each change and the contacts in flight
+ *
+ * The form never saves over a record it has not loaded: nothing renders until the sequence has loaded, Save stays
+ * disabled until something differs from what was loaded, and the request carries ONLY the changed fields (a partial
+ * PATCH, so a field this form does not show is never reset). A 409 (the sequence is mid-transition: launching, pausing)
+ * is shown as the API words it. The audience list, mailboxes and steps are not edited here: the API cannot change the
+ * list after creation, senders are SequenceSendersPanel, steps are SequenceStepsPanel.
+ */
+import { useState } from "react";
+import { Button, Input, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { g8Get, g8Patch } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { changeSummary, editableSequence, sequenceChanges } from "../lib/sequencer-manage";
+import type { EditableSequence } from "../lib/sequencer-manage";
+import { objectOf, statusGroup } from "../lib/sequencer-utils";
+
+export interface SequenceEditFormProps {
+  sequenceId: string;
+  /** Called after the change was saved. */
+  onSaved?: () => void;
+  onCancel?: () => void;
+  className?: string;
+}
+
+function Fields({ loaded, contacts, live, sequenceId, onSaved, onCancel }: { loaded: EditableSequence; contacts: number; live: boolean; sequenceId: string; onSaved?: () => void; onCancel?: () => void }) {
+  const [draft, setDraft] = useState<EditableSequence>(loaded);
+  const [confirming, setConfirming] = useState(false);
+  const changes = sequenceChanges(loaded, draft);
+  const dirty = Object.keys(changes).length > 0;
+  const save = useG8Mutation(async () => {
+    await g8Patch(`/sequences/${encodeURIComponent(sequenceId)}`, changes);
+  }, { invalidates: ["sequences"] });
+  const set = <K extends keyof EditableSequence>(key: K, value: EditableSequence[K]) => setDraft((d) => ({ ...d, [key]: value }));
+  const confirm = async () => {
+    try {
+      await save.mutateAsync(undefined);
+      setConfirming(false);
+      onSaved?.();
+    } catch {
+      setConfirming(false);
+    }
+  };
+  const check = (key: "finish_on_reply" | "send_in_same_thread" | "wait_for_new_contacts", label: string) => (
+    <label className="flex items-center gap-2 text-sm">
+      <input type="checkbox" checked={draft[key]} onChange={(e) => set(key, e.target.checked)} />
+      {label}
+    </label>
+  );
+  return (
+    <form className="space-y-3" onSubmit={(e) => { e.preventDefault(); if (dirty && draft.name.trim()) setConfirming(true); }}>
+      <label className="block space-y-1 text-sm"><span className="font-medium">Name</span><Input aria-label="Sequence name" value={draft.name} onChange={(e) => set("name", e.target.value)} /></label>
+      <label className="block space-y-1 text-sm"><span className="font-medium">Description</span><Textarea aria-label="Description" rows={3} value={draft.description} onChange={(e) => set("description", e.target.value)} /></label>
+      <div className="space-y-2">
+        {check("finish_on_reply", "Stop sending to a contact once they reply")}
+        {check("send_in_same_thread", "Send follow-up emails in the same thread")}
+        {check("wait_for_new_contacts", "Keep picking up contacts added to the audience list")}
+      </div>
+      {live ? <p role="note" className="text-xs text-warning-foreground">This sequence is live. Changes apply to contacts already in it.</p> : null}
+      {save.error ? <ApiError error={save.error} title="Could not save the sequence" /> : null}
+      <div className="flex justify-end gap-2">
+        {onCancel ? <Button type="button" variant="outline" onClick={onCancel}>Cancel</Button> : null}
+        <Button type="submit" disabled={!dirty || !draft.name.trim() || save.loading}>Save changes</Button>
+      </div>
+      <ConfirmSpendDialog
+        open={confirming}
+        tier="external"
+        title={`Save changes to "${loaded.name}"?`}
+        description={<ul className="list-disc pl-5">{changeSummary(changes).map((c) => <li key={c}>{c}</li>)}</ul>}
+        recipients={contacts > 0 ? contacts : undefined}
+        confirmLabel="Save changes"
+        confirming={save.loading}
+        onConfirm={() => void confirm()}
+        onCancel={() => setConfirming(false)}
+      />
+    </form>
+  );
+}
+
+export function SequenceEditForm({ sequenceId, onSaved, onCancel, className }: SequenceEditFormProps) {
+  const [version, setVersion] = useState(0);
+  // No refetch on window focus: it would reseed the form and wipe what the person is typing.
+  const seq = useG8Query((signal) => g8Get(`/sequences/${encodeURIComponent(sequenceId)}`, undefined, { signal }), [sequenceId], { key: ["sequences", "edit", sequenceId], keepPrevious: false, refetchOnFocus: false });
+  if (seq.error) return <ApiError error={seq.error} title="Could not load the sequence" onRetry={() => void seq.refetch()} className={className} />;
+  if (!seq.data || seq.isPlaceholderData) return <Skeleton aria-busy="true" className={`h-48 w-full ${className ?? ""}`} />;
+  const record = objectOf(seq.data);
+  return (
+    <div className={className}>
+      <Fields
+        key={`${sequenceId}:${version}`}
+        loaded={editableSequence(record)}
+        contacts={Number(record.contact_count ?? 0) || 0}
+        live={statusGroup(typeof record.status === "string" ? record.status : null) === "live"}
+        sequenceId={sequenceId}
+        onSaved={() => { void seq.refetch().then(() => setVersion((v) => v + 1)); onSaved?.(); }}
+        onCancel={onCancel}
+      />
+    </div>
+  );
+}

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

@@ -24,6 +24,7 @@ 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 { ContactDetail } from "@/g8/crm/components/contact-detail";
+import { WithdrawContactButton } from "./enrollment-withdraw";
 import { fieldItems, listOf } from "../lib/sequencer-utils";
 
 export interface SequenceEnrollmentsProps {
@@ -31,6 +32,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 +44,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 +92,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}{open.contact_id != null ? <WithdrawContactButton sequenceId={sequenceId} contactId={open.contact_id} contactName={nameOf(open)} onWithdrawn={() => { onContactChange?.(null); void list.refetch(); }} /> : 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-manage-actions.tsx

@@ -0,0 +1,119 @@
+"use client";
+
+/**
+ * SequenceManageActions: the buttons that manage a sequence itself, for a sequence detail's action row: Edit (rename and
+ * settings), Sync audience, Save as template, Delete.
+ *
+ * SDK operations, in order:
+ *   Edit             SequenceEditForm in a sheet: getSequence (read) then updateSequence PATCH /sequences/{id} (EXTERNAL, confirmed there)
+ *   Sync audience    POST /sequences/{id}/sync        (sequences.syncSequence)   EXTERNAL -> ConfirmSpendDialog first.
+ *                    Re-pulls the audience list so contacts added to it since launch are ENROLLED (real recipients).
+ *   Save as template GET  /sequences/{id}/steps       (sequenceLifecycle.listSequenceSteps)   read
+ *                    POST /sequencer/templates/sequences (sequences.createSequenceTemplate)   write; the steps are copied, not linked
+ *   Delete           DELETE /sequences/{id}           (sequenceLifecycle.deleteSequence)      DESTRUCTIVE -> ConfirmSpendDialog first.
+ *                    The API's DELETE is a SOFT delete, the same as archive: the sequence stops, leaves every list, and cannot be
+ *                    restored through the API. The Archive button in SequenceDetail stays for the same effect.
+ */
+import { useState } from "react";
+import { BookmarkPlus, Pencil, RefreshCw, Trash2 } from "lucide-react";
+import { Button, Input } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { g8Delete, g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { templateBodyFromSteps } from "../lib/sequencer-manage";
+import { listOf, statusGroup } from "../lib/sequencer-utils";
+import type { ApiStep, SequenceRow } from "../lib/sequencer-utils";
+import { SequenceEditForm } from "./sequence-edit-form";
+
+export interface SequenceManageActionsProps {
+  sequence: SequenceRow;
+  /** Called after any change so the list and detail can refresh. */
+  onChanged?: () => void;
+  /** Called after the sequence was deleted (close its detail here). */
+  onDeleted?: () => void;
+  className?: string;
+}
+
+type Dialog = "sync" | "delete" | "template" | null;
+
+export function SequenceManageActions({ sequence, onChanged, onDeleted, className }: SequenceManageActionsProps) {
+  const [dialog, setDialog] = useState<Dialog>(null);
+  const [editing, setEditing] = useState(false);
+  const [templateName, setTemplateName] = useState("");
+  const [notice, setNotice] = useState<string | null>(null);
+  const name = sequence.name ?? `Sequence ${sequence.id}`;
+  const group = statusGroup(sequence.status);
+  const id = encodeURIComponent(sequence.id);
+
+  const sync = useG8Mutation(async () => {
+    await g8Post(`/sequences/${id}/sync`);
+    setDialog(null);
+    setNotice("The audience list was synced.");
+    onChanged?.();
+  }, { invalidates: ["sequences"], onError: () => setDialog(null) });
+  const remove = useG8Mutation(async () => {
+    await g8Delete(`/sequences/${id}`);
+    setDialog(null);
+    onChanged?.();
+    onDeleted?.();
+  }, { invalidates: ["sequences"], onError: () => setDialog(null) });
+  const saveTemplate = useG8Mutation(async () => {
+    const steps = listOf<ApiStep>(await g8Get(`/sequences/${id}/steps`));
+    if (steps.length === 0) throw new Error("This sequence has no steps to save.");
+    await g8Post("/sequencer/templates/sequences", templateBodyFromSteps(templateName, "", steps));
+    setDialog(null);
+    setNotice(`Saved "${templateName.trim()}" as a template.`);
+  }, { onError: () => undefined });
+
+  return (
+    <>
+      <span className={`contents ${className ?? ""}`}>
+        <Button size="sm" variant="outline" onClick={() => setEditing(true)}><Pencil className="mr-1 h-4 w-4" aria-hidden />Edit</Button>
+        {group === "live" || group === "paused" ? <Button size="sm" variant="outline" onClick={() => setDialog("sync")}><RefreshCw className="mr-1 h-4 w-4" aria-hidden />Sync audience</Button> : null}
+        <Button size="sm" variant="ghost" onClick={() => { setTemplateName(`${name} template`); setDialog("template"); }}><BookmarkPlus className="mr-1 h-4 w-4" aria-hidden />Save as template</Button>
+        <Button size="sm" variant="ghost" onClick={() => setDialog("delete")}><Trash2 className="mr-1 h-4 w-4" aria-hidden />Delete sequence</Button>
+      </span>
+      {notice ? <p role="status" className="basis-full text-xs text-muted-foreground">{notice}</p> : null}
+      {[sync.error, remove.error].map((e, i) => (e ? <ApiError key={i} error={e} title="Could not update the sequence" /> : null))}
+
+      <FormSheet open={editing} onOpenChange={setEditing} title={`Edit ${name}`} description="Rename it or change how it behaves. Only what you change is saved.">
+        {editing ? <SequenceEditForm sequenceId={sequence.id} onCancel={() => setEditing(false)} onSaved={() => { setEditing(false); onChanged?.(); }} /> : null}
+      </FormSheet>
+
+      <FormSheet
+        open={dialog === "template"}
+        onOpenChange={(o) => !o && setDialog(null)}
+        title="Save as template"
+        description="Copies the steps so you can start new sequences from them. The template does not change when this sequence does."
+        footer={<><Button variant="outline" onClick={() => setDialog(null)}>Cancel</Button><Button loading={saveTemplate.loading} disabled={!templateName.trim()} onClick={() => void saveTemplate.mutate(undefined)}>Save template</Button></>}
+      >
+        <Input aria-label="Template name" value={templateName} onChange={(e) => setTemplateName(e.target.value)} />
+        {saveTemplate.error ? <ApiError error={saveTemplate.error} title="Could not save the template" /> : null}
+      </FormSheet>
+
+      <ConfirmSpendDialog
+        open={dialog === "sync"}
+        tier="external"
+        title={`Sync the audience of "${name}"?`}
+        description="Contacts added to the audience list since the last sync are enrolled now and start receiving the steps."
+        confirmLabel="Sync audience"
+        confirming={sync.loading}
+        onConfirm={() => void sync.mutate(undefined)}
+        onCancel={() => setDialog(null)}
+      />
+      <ConfirmSpendDialog
+        open={dialog === "delete"}
+        tier="destructive"
+        title={`Delete "${name}"?`}
+        description="The sequence stops sending and disappears from your lists. The API cannot restore a deleted sequence. Contacts already messaged keep what they received."
+        confirmLabel="Delete sequence"
+        affected={1}
+        confirming={remove.loading}
+        onConfirm={() => void remove.mutate(undefined)}
+        onCancel={() => setDialog(null)}
+      />
+    </>
+  );
+}

package/blocks/sequencer/components/sequence-senders-panel.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+/**
+ * SequenceSendersPanel: the senders a sequence sends from (mailboxes, phone numbers, LinkedIn accounts) and a way to
+ * take one off.
+ *
+ * SDK operations, in order:
+ *   1. listSequenceChannels   GET    /sequences/{id}/channels                       (read)
+ *   2. removeSequenceChannel  DELETE /sequences/{id}/channels/{sequence_channel_id}  (DESTRUCTIVE) -> ConfirmSpendDialog first
+ * Removing the only sender of a step type means those steps can no longer send and the sequence cannot launch (or keeps
+ * a live step stuck); the dialog says which step types lose their sender. Adding senders to an existing sequence is
+ * done where its steps are added (SequenceBuilder in edit mode), which asks for the sender each new step type needs.
+ */
+import { useState } from "react";
+import { Trash2 } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+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 { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { listOf } from "../lib/sequencer-utils";
+
+export interface SequenceSendersPanelProps {
+  sequenceId: string;
+  /** Called after a sender was removed so a detail can recheck whether the sequence can launch. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+interface Channel { id?: string | number; channel_id?: number; channel_type?: string | null; channel_value?: string | null }
+
+const LABEL: Record<string, string> = { GMAIL: "Gmail mailbox", INBOXKIT: "Managed mailbox", SMTP: "SMTP mailbox", PHONE: "Phone number", LINKEDIN: "LinkedIn account", LINKEDIN_NETRION: "LinkedIn account", SMS: "SMS number", WHATSAPP: "WhatsApp number" };
+const STEPS_LOST: Record<string, string> = { GMAIL: "email", INBOXKIT: "email", SMTP: "email", PHONE: "call", LINKEDIN: "LinkedIn", LINKEDIN_NETRION: "LinkedIn", SMS: "SMS", WHATSAPP: "WhatsApp" };
+const typeOf = (c: Channel) => (c.channel_type ?? "").toUpperCase();
+
+export function SequenceSendersPanel({ sequenceId, onChanged, className }: SequenceSendersPanelProps) {
+  const [removing, setRemoving] = useState<Channel | null>(null);
+  const list = useG8Query((signal) => g8Get(`/sequences/${encodeURIComponent(sequenceId)}/channels`, undefined, { signal }), [sequenceId], { key: ["sequences", "channels", sequenceId] });
+  const rows = listOf<Channel>(list.data);
+  const remove = useG8Mutation(async (c: Channel) => {
+    await g8Delete(`/sequences/${encodeURIComponent(sequenceId)}/channels/${encodeURIComponent(String(c.id))}`);
+    setRemoving(null);
+    await list.refetch();
+    onChanged?.();
+  }, { invalidates: ["sequences"], onError: () => setRemoving(null) });
+
+  if (list.error) return <ApiError error={list.error} title="Could not load the senders" onRetry={() => void list.refetch()} className={className} />;
+  if (list.loading && !list.data) return <Skeleton aria-busy="true" className={`h-24 w-full ${className ?? ""}`} />;
+  const others = removing ? rows.filter((c) => c.id !== removing.id && STEPS_LOST[typeOf(c)] === STEPS_LOST[typeOf(removing)]).length : 0;
+
+  return (
+    <div className={`space-y-3 ${className ?? ""}`}>
+      <h3 className="font-medium">Senders</h3>
+      {rows.length === 0 ? (
+        <EmptyState compact title="No sender yet" description="Steps need a sender to go out: a mailbox for emails, a number for calls, an account for LinkedIn. Add steps with their sender in the Steps tab." />
+      ) : (
+        <ul aria-label="Senders" className="divide-y rounded-md border border-border text-sm">
+          {rows.map((c) => (
+            <li key={String(c.id ?? `${c.channel_type}:${c.channel_id}`)} className="flex items-center gap-3 p-2">
+              <StatusPill tone="neutral">{LABEL[typeOf(c)] ?? (c.channel_type || "Sender")}</StatusPill>
+              <span className="min-w-0 flex-1 truncate">{c.channel_value || `#${c.channel_id ?? ""}`}</span>
+              <Button size="sm" variant="ghost" aria-label={`Remove sender ${c.channel_value ?? c.channel_id ?? ""}`} disabled={c.id == null} onClick={() => setRemoving(c)}><Trash2 className="size-4" aria-hidden /></Button>
+            </li>
+          ))}
+        </ul>
+      )}
+      {remove.error ? <ApiError error={remove.error} title="Could not remove the sender" /> : null}
+      <ConfirmSpendDialog
+        open={removing != null}
+        tier="destructive"
+        title={`Remove ${removing?.channel_value ?? "this sender"} from the sequence?`}
+        description={others === 0 && removing ? `It is the only ${STEPS_LOST[typeOf(removing)] ?? ""} sender, so those steps can no longer send until you add another.` : "Other senders of the same kind keep the sequence sending."}
+        confirmLabel="Remove sender"
+        affected={1}
+        confirming={remove.loading}
+        onConfirm={() => removing && void remove.mutate(removing)}
+        onCancel={() => setRemoving(null)}
+      />
+    </div>
+  );
+}