@graph8/sdk 0.361.0 → 0.370.0

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

@@ -0,0 +1,259 @@
+"use client";
+
+/**
+ * SequenceDetail: one sequence, complete. Every field, the audience list, and every action: launch, pause,
+ * resume, duplicate, archive, enroll contacts. Tabs: Details, Steps (each step a record), Contacts (each
+ * enrollment a record, with the contact), Results (totals and per-step progress).
+ *
+ * SDK operations, in order:
+ *   1. getSequence        GET  /sequences/{id}            (read; all fields, associated_list_id)
+ *   2. previewSequence    GET  /sequences/{id}/preview    (read; checked before a launch: each step's
+ *                         `rendered.will_send_as_shown` / `content_issues`, and a sender channel for every step type.
+ *                         A missing sender, a missing audience list or an error-severity issue would make /run
+ *                         answer 400, so the launch is refused here with the reasons instead of offered)
+ *   3. runSequence / pauseSequence / resumeSequence  POST /sequences/{id}/run|pause|resume
+ *                         (external: confirmed with the recipient count)
+ *   4. duplicateSequence  POST /sequences/{id}/duplicate  (write; the copy starts as a draft)
+ *   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.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Copy, UserPlus } 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 { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } 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 { ContactTable } from "@/g8/crm/components/contact-table";
+import { ListPicker } from "@/g8/lists/components/list-picker";
+import { fieldItems, launchCheck, listOf, objectOf, statusGroup } from "../lib/sequencer-utils";
+import type { SequenceRow } from "../lib/sequencer-utils";
+import { EnrollDialog } from "./enroll-dialog";
+import { SequenceEnrollments } from "./sequence-enrollments";
+import { SequenceStats } from "./sequence-stats";
+import { SequenceStepsPanel } from "./sequence-steps-panel";
+import { pluralWord } from "@/g8/lib/plural";
+
+/** Whole-list enrolment reads at most this many pages of 100 contacts (5,000). */
+const MAX_ENROLL_PAGES = 50;
+const TONE = { draft: "neutral", live: "positive", paused: "warning", ended: "neutral", busy: "info" } as const;
+
+export function EnrollSheet({ sequence, onClose, onEnrolled }: { sequence: SequenceRow & { associated_list_id?: number | null }; onClose: () => void; onEnrolled: () => void }) {
+  const [listId, setListId] = useState<number | null>(sequence.associated_list_id ?? null);
+  const [ids, setIds] = useState<number[]>([]);
+  const [confirm, setConfirm] = useState(false);
+  const [gathering, setGathering] = useState(false);
+  const [gatherError, setGatherError] = useState<unknown>(null);
+  // True when "Enroll the whole list" stopped at the cap, so the confirm says only part is included.
+  const [truncated, setTruncated] = useState(false);
+  const gatherAll = async () => {
+    if (listId == null) return;
+    setGathering(true);
+    setGatherError(null);
+    try {
+      const all: number[] = [];
+      let more = false;
+      for (let page = 1; page <= MAX_ENROLL_PAGES; page++) {
+        const rows = listOf<{ id: number }>(await g8Get("/contacts", { list_id: listId, page, limit: 100 }));
+        all.push(...rows.map((r) => r.id));
+        if (rows.length < 100) break;
+        if (page === MAX_ENROLL_PAGES) {
+          // A full last page: ask whether anything follows, so the confirm can say the list was cut.
+          more = listOf<{ id: number }>(await g8Get("/contacts", { list_id: listId, page: page + 1, limit: 100 })).length > 0;
+        }
+      }
+      setTruncated(more);
+      setIds([...new Set(all)]);
+      setConfirm(true);
+    } catch (err) {
+      setGatherError(err);
+    } finally {
+      setGathering(false);
+    }
+  };
+  return (
+    <FormSheet open width="xl" onOpenChange={(o) => !o && onClose()} title={`Enroll contacts in ${sequence.name ?? sequence.id}`} description="Choose a list, tick the contacts, then confirm.">
+      <div className="space-y-4">
+        <ListPicker value={listId} allowCreate={false} onChange={(l) => { setListId(l.id); setIds([]); setTruncated(false); }} />
+        {listId != null ? (
+          <ContactTable key={listId} listId={listId} selectable allowDelete={false} pageSize={10} onSelectionChange={(sel) => { setIds(sel); setTruncated(false); }} />
+        ) : null}
+        <Button disabled={ids.length === 0 || listId == null} onClick={() => setConfirm(true)}>
+          <UserPlus className="mr-1 h-4 w-4" aria-hidden /> {ids.length === 0 ? "Enroll contacts" : `Enroll ${ids.length.toLocaleString()} ${pluralWord(ids.length, "contact")}`}
+        </Button>
+        {listId != null ? (
+          <Button variant="outline" loading={gathering} onClick={() => void gatherAll()}>
+            Enroll the whole list
+          </Button>
+        ) : null}
+        {gatherError ? <ApiError error={gatherError} title="Could not read the list" onRetry={() => void gatherAll()} /> : null}
+      </div>
+      <EnrollDialog
+        open={confirm}
+        sequenceId={sequence.id}
+        sequenceName={sequence.name ?? undefined}
+        contactIds={ids}
+        listId={listId ?? undefined}
+        note={truncated ? (
+          <p role="alert" className="text-sm">
+            This list has more than {(MAX_ENROLL_PAGES * 100).toLocaleString()} contacts. Only the first {(MAX_ENROLL_PAGES * 100).toLocaleString()} are enrolled. Enroll the rest from a smaller list.
+          </p>
+        ) : undefined}
+        onClose={() => setConfirm(false)}
+        onEnrolled={() => { setConfirm(false); onEnrolled(); }}
+      />
+    </FormSheet>
+  );
+}
+
+
+type Action = "launch" | "pause" | "resume" | "archive";
+const COPY: Record<Action, { title: string; description: string; label: string }> = {
+  launch: { title: "Launch", description: "Contacts in the audience start receiving the steps in order.", label: "Launch sequence" },
+  pause: { title: "Pause", description: "Sending stops. Contacts keep their place.", label: "Pause sequence" },
+  resume: { title: "Resume", description: "Contacts continue from where they stopped.", label: "Resume sequence" },
+  archive: { title: "Archive", description: "The sequence is hidden and stops sending. The API cannot restore an archived sequence.", label: "Archive sequence" },
+};
+
+export interface SequenceDetailProps {
+  sequenceId: string;
+  /** Controlled tab ("details" | "steps" | "contacts" | "results" | an extra tab id) for deep links. */
+  tab?: string;
+  onTabChange?: (tab: string) => void;
+  stepId?: string;
+  onStepChange?: (stepId: string | null) => void;
+  contactId?: string;
+  onContactChange?: (contactId: string | null) => void;
+  onClose?: () => void;
+  /** Full-page mode: show an "Open full page" (onExpand) or "Back to split view" (onCollapse) button. */
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  /** Called after any change (status, steps, enrollment, duplicate) so a list can refresh. */
+  onChanged?: () => void;
+  /** Change it to make the detail reload (a list action changed this sequence). */
+  refreshKey?: number;
+  /** Open another sequence (the duplicate). */
+  onOpenSequence?: (sequenceId: string) => void;
+  renderActions?: (sequence: SequenceRow) => ReactNode;
+  extraTabs?: { id: string; label: string; render: (sequence: SequenceRow) => ReactNode }[];
+  className?: string;
+}
+
+export function SequenceDetail(props: SequenceDetailProps) {
+  const { sequenceId: id, onClose, onChanged, className } = props;
+  const [enrolling, setEnrolling] = useState(false);
+  const [pending, setPending] = useState<{ action: Action; warnings: string[] } | null>(null);
+  const [blocked, setBlocked] = useState<string[] | null>(null);
+  const [statsKey, setStatsKey] = useState(0);
+  const [version, setVersion] = useState(0);
+  const seq = useG8Query((signal) => g8Get(`/sequences/${id}`, undefined, { signal }), [id, version, props.refreshKey], { key: ["sequences", "detail", id] });
+  const row = { id, ...objectOf(seq.data) } as SequenceRow & { associated_list_id?: number | null };
+  const group = statusGroup(row.status);
+  const changed = () => { setVersion((v) => v + 1); onChanged?.(); };
+
+  const prepare = useG8Mutation(async (action: Action) => {
+    let warnings: string[] = [];
+    setBlocked(null);
+    if (action === "launch") {
+      const check = launchCheck(objectOf(await g8Get(`/sequences/${id}/preview`)));
+      if (seq.data && row.associated_list_id == null) check.blockers.unshift("It has no audience list. Create the sequence again with one.");
+      if (check.blockers.length > 0) {
+        setBlocked(check.blockers);
+        return;
+      }
+      warnings = check.warnings;
+    }
+    setPending({ action, warnings });
+  });
+  const run = useG8Mutation(async (action: Action) => {
+    await g8Post(`/sequences/${id}/${action === "launch" ? "run" : action}`, action === "archive" ? {} : undefined);
+    setPending(null);
+    changed();
+  }, { invalidates: [["sequences", "list"], ["sequences", "summary"]], onError: () => setPending(null) });
+  const duplicate = useG8Mutation(async () => {
+    const res = objectOf(await g8Post(`/sequences/${id}/duplicate`, {}));
+    changed();
+    if (res.id != null) props.onOpenSequence?.(String(res.id));
+  }, { invalidates: [["sequences", "list"], ["sequences", "summary"]] });
+
+  if (seq.error) return <ApiError error={seq.error} title="Could not load the sequence" onRetry={() => void seq.refetch()} className={className} />;
+  const p = pending;
+  return (
+    <DetailPanel
+      className={className}
+      title={row.name ?? `Sequence ${id}`}
+      subtitle={row.step_count != null ? `${row.step_count} steps` : undefined}
+      badges={row.status ? <StatusPill tone={TONE[group]} dot>{row.status}</StatusPill> : null}
+      actions={
+        <>
+          {group === "draft" ? <Button size="sm" loading={prepare.loading} onClick={() => void prepare.mutate("launch")}>Launch</Button> : null}
+          {group === "live" ? <Button size="sm" variant="outline" onClick={() => void prepare.mutate("pause")}>Pause</Button> : null}
+          {group === "paused" ? <Button size="sm" variant="outline" onClick={() => void prepare.mutate("resume")}>Resume</Button> : null}
+          <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}
+          {props.renderActions?.(row)}
+          {enrolling ? <EnrollSheet sequence={row} onClose={() => setEnrolling(false)} onEnrolled={() => { setEnrolling(false); setStatsKey((k) => k + 1); changed(); }} /> : null}
+          {p ? (
+            <ConfirmSpendDialog
+              open
+              tier={p.action === "archive" ? "destructive" : "external"}
+              title={`${COPY[p.action].title} "${row.name ?? id}"`}
+              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}
+                </>
+              }
+              recipients={p.action === "archive" ? undefined : (row.contact_count ?? undefined)}
+              affected={p.action === "archive" ? 1 : undefined}
+              confirmLabel={COPY[p.action].label}
+              confirming={run.loading}
+              onCancel={() => setPending(null)}
+              onConfirm={() => void run.mutate(p.action)}
+            />
+          ) : null}
+        </>
+      }
+      onClose={onClose}
+      onExpand={props.onExpand}
+      onCollapse={props.onCollapse}
+      activeTab={props.tab}
+      onTabChange={props.onTabChange}
+      tabs={[
+        {
+          id: "details",
+          label: "Details",
+          content: (
+            <div className="space-y-4">
+              {[prepare.error, run.error, duplicate.error].map((e, i) => (e ? <ApiError key={i} error={e} /> : null))}
+              {blocked ? (
+                <div role="alert" className="rounded-md border border-border p-3 text-sm">
+                  <p className="font-medium">This sequence cannot launch yet</p>
+                  <ul className="mt-1 list-disc pl-5 text-muted-foreground">{blocked.map((r) => <li key={r}>{r}</li>)}</ul>
+                </div>
+              ) : null}
+              <KeyValueList columns={2} items={fieldItems(objectOf(seq.data))} />
+              <SectionCard title="Audience" description="The list this sequence sends to.">
+                <p className="text-sm">{row.associated_list_id != null ? `List ${row.associated_list_id}` : "No audience list yet."}</p>
+              </SectionCard>
+            </div>
+          ),
+        },
+        { 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: "results", label: "Results", content: <SequenceStats key={`${id}:${statsKey}`} sequenceId={id} refreshSeconds={group === "live" ? 60 : undefined} /> },
+        ...(props.extraTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(row) })),
+      ]}
+    />
+  );
+}

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

@@ -0,0 +1,114 @@
+"use client";
+
+/**
+ * SequenceEnrollments: the contacts enrolled in one sequence, each one a record. A filterable list; open one
+ * (deep link via `contactId`) for its state in this sequence, every field, the contact itself and the actions.
+ *
+ * SDK operations, in order:
+ *   1. listSequenceContacts   GET  /sequences/{id}/contacts?state&page&limit            (read)
+ *   2. pauseSequenceContact   POST /sequences/{id}/contacts/{contact_id}/pause           (write: direct)
+ *   3. resumeSequenceContact  POST /sequences/{id}/contacts/{contact_id}/resume          (external: confirmed)
+ *   The embedded ContactDetail (crm block) owns the contact's own reads and edits.
+ */
+
+import { useState } from "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 { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+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 { ContactDetail } from "@/g8/crm/components/contact-detail";
+import { fieldItems, listOf } from "../lib/sequencer-utils";
+
+export interface SequenceEnrollmentsProps {
+  sequenceId: string;
+  /** The open enrollment, by contact id. Controlled so a screen can deep-link it. */
+  contactId?: string;
+  onContactChange?: (contactId: string | null) => void;
+  pageSize?: number;
+  className?: string;
+}
+
+interface Enrollment { id?: string; contact_id?: number; state?: string; current_step_order?: number | null; name?: string; email?: string; [k: string]: unknown }
+
+const STATES = ["", "waiting", "paused", "completed", "replied", "bounced", "skipped"];
+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) {
+  const [state, setState] = useState("");
+  const [page, setPage] = useState(1);
+  const [resume, setResume] = useState<Enrollment | null>(null);
+  const list = useG8Query(
+    (signal) => g8Get(`/sequences/${sequenceId}/contacts`, { page, limit: pageSize, state: state || undefined }, { signal }),
+    [sequenceId, page, pageSize, state],
+    { key: ["sequences", "contacts", sequenceId, { page, pageSize, state }] },
+  );
+  const pause = useG8Mutation(async (e: Enrollment) => { await g8Post(`/sequences/${sequenceId}/contacts/${e.contact_id}/pause`); await list.refetch(); });
+  const resumeRun = useG8Mutation(async (e: Enrollment) => { await g8Post(`/sequences/${sequenceId}/contacts/${e.contact_id}/resume`); setResume(null); await list.refetch(); }, { onError: () => setResume(null) });
+
+  const rows = listOf<Enrollment>(list.data);
+  const open = rows.find((r) => String(r.contact_id) === contactId);
+  const actions = (e: Enrollment) =>
+    e.state === "paused" ? (
+      <Button size="sm" variant="outline" onClick={() => setResume(e)}>Resume contact</Button>
+    ) : e.state === "waiting" ? (
+      <Button size="sm" variant="outline" loading={pause.loading} onClick={() => void pause.mutate(e)}>Pause contact</Button>
+    ) : null;
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <div className="flex items-center gap-2">
+        <select aria-label="Enrollment state" className="h-9 rounded-md border bg-background px-2 text-sm" value={state} onChange={(e) => { setState(e.target.value); setPage(1); onContactChange?.(null); }}>
+          {STATES.map((s) => <option key={s} value={s}>{s || "All states"}</option>)}
+        </select>
+      </div>
+      {list.error ? <ApiError error={list.error} onRetry={() => void list.refetch()} /> : null}
+      {[pause.error, resumeRun.error].map((e, i) => (e ? <ApiError key={i} error={e} /> : null))}
+      {list.loading && !list.data ? <Skeleton className="h-32 w-full" /> : null}
+      {!list.loading && !list.error && rows.length === 0 ? <EmptyState title="No enrolled contacts" description={state ? "No contact is in this state." : "Enroll contacts to start the sequence."} /> : null}
+      {rows.length > 0 ? (
+        <ul aria-label="Enrolled contacts" className="divide-y rounded-md border">
+          {rows.map((e) => (
+            <li key={e.id ?? e.contact_id} className={`flex items-center gap-3 px-3 py-2 text-sm ${String(e.contact_id) === contactId ? "bg-muted" : ""}`}>
+              <button type="button" className="min-w-0 flex-1 truncate text-left font-medium hover:underline" aria-label={`Open ${nameOf(e)}`} onClick={() => onContactChange?.(String(e.contact_id))}>{nameOf(e)}</button>
+              {e.current_step_order != null ? <span className="text-xs text-muted-foreground">step {e.current_step_order}</span> : null}
+              <StatusPill tone={TONE[e.state ?? ""] ?? "neutral"} dot>{e.state ?? "unknown"}</StatusPill>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      <div className="flex justify-end gap-2">
+        <Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>Previous</Button>
+        <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></>}>
+          <KeyValueList columns={2} items={fieldItems(open as Record<string, unknown>)} />
+          {open.contact_id != null ? (
+            <SectionCard title="Contact" description="The full contact record.">
+              <ContactDetail contactId={open.contact_id} />
+            </SectionCard>
+          ) : null}
+        </SectionCard>
+      ) : null}
+      <ConfirmSpendDialog
+        open={resume !== null}
+        tier="external"
+        title={`Resume ${resume ? nameOf(resume) : "this contact"}`}
+        description="They continue from where they stopped and may receive the next step."
+        recipients={1}
+        confirmLabel="Resume contact"
+        confirming={resumeRun.loading}
+        onCancel={() => setResume(null)}
+        onConfirm={() => resume && void resumeRun.mutate(resume)}
+      />
+    </div>
+  );
+}

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

@@ -6,8 +6,10 @@
  *
  * SDK operations, in order:
  *   1. listSequences      GET  /sequences?status=&page=&limit=       (read)
- *   2. previewSequence    GET  /sequences/{id}/preview               (read; checked before a launch: does the copy
- *                         send as shown? `will_send_as_shown`, `content_issues`)
+ *   2. previewSequence    GET  /sequences/{id}/preview               (read; checked before a launch: does each step's
+ *                         copy send as shown (`steps[].rendered.will_send_as_shown` / `content_issues`), and does every
+ *                         step type have a sender channel? A missing sender or an error-severity issue makes /run
+ *                         answer 400, so the launch is refused here with the reasons instead of offered)
  *   3. runSequence        POST /sequences/{id}/run                   (external: launches a draft; confirmed with the
  *                         recipient count)
  *      pauseSequence      POST /sequences/{id}/pause                 (external: confirmed)
@@ -27,7 +29,7 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
-import { listOf, objectOf, STATUS_CLASS, statusGroup } from "../lib/sequencer-utils";
+import { launchCheck, listOf, objectOf, STATUS_CLASS, statusGroup } from "../lib/sequencer-utils";
 import type { SequenceRow } from "../lib/sequencer-utils";
 
 export interface SequenceListProps {
@@ -36,6 +38,8 @@ export interface SequenceListProps {
   pageSize?: number;
   onOpen?: (sequence: SequenceRow) => void;
   onCreate?: () => void;
+  /** Called after a launch, pause, resume, duplicate or archive succeeded (a screen refreshes its header). */
+  onChanged?: () => void;
   className?: string;
 }
 
@@ -58,20 +62,26 @@ const COPY: Record<Action, { title: string; description: string; label: string }
   },
 };
 
-export function SequenceList({ status, pageSize = 25, onOpen, onCreate, className }: SequenceListProps) {
+export function SequenceList({ status, pageSize = 25, onOpen, onCreate, onChanged, className }: SequenceListProps) {
   const [page, setPage] = useState(1);
   const [pending, setPending] = useState<Pending | null>(null);
   const [preparing, setPreparing] = useState<string | null>(null);
-  const list = useG8Query((signal) => g8Get("/sequences", { page, limit: pageSize, status }, { signal }), [page, pageSize, status]);
+  const [blocked, setBlocked] = useState<{ sequence: SequenceRow; reasons: string[] } | null>(null);
+  const list = useG8Query((signal) => g8Get("/sequences", { page, limit: pageSize, status }, { signal }), [page, pageSize, status], { key: ["sequences", "list", { page, pageSize, status }] });
 
   const prepare = useG8Mutation(async (v: { action: Action; sequence: SequenceRow }) => {
     let warnings: string[] = [];
     setPreparing(v.sequence.id);
+    setBlocked(null);
     try {
       if (v.action === "launch") {
-        const preview = objectOf(await g8Get(`/sequences/${v.sequence.id}/preview`));
-        const issues = Array.isArray(preview.content_issues) ? (preview.content_issues as Array<{ message?: string }>) : [];
-        warnings = preview.will_send_as_shown === false ? issues.map((i) => i.message ?? "Copy will not send as shown") : [];
+        const check = launchCheck(objectOf(await g8Get(`/sequences/${v.sequence.id}/preview`)));
+        if (v.sequence.associated_list_id === null) check.blockers.unshift("It has no audience list. Create the sequence again with one.");
+        if (check.blockers.length > 0) {
+          setBlocked({ sequence: v.sequence, reasons: check.blockers });
+          return;
+        }
+        warnings = check.warnings;
       }
       setPending({ ...v, warnings });
     } finally {
@@ -81,10 +91,12 @@ export function SequenceList({ status, pageSize = 25, onOpen, onCreate, classNam
   const run = useG8Mutation(async (p: Pending) => {
     await g8Post(`/sequences/${p.sequence.id}/${PATH[p.action]}`, p.action === "archive" ? {} : undefined);
     await list.refetch();
+    onChanged?.();
   });
   const duplicate = useG8Mutation(async (s: SequenceRow) => {
     await g8Post(`/sequences/${s.id}/duplicate`, {});
     await list.refetch();
+    onChanged?.();
   });
 
   const rows = listOf<SequenceRow>(list.data);
@@ -105,6 +117,19 @@ export function SequenceList({ status, pageSize = 25, onOpen, onCreate, classNam
       {[prepare.error, run.error, duplicate.error].filter(Boolean).map((e, i) => (
         <ApiError key={i} error={e} />
       ))}
+      {blocked ? (
+        <div role="alert" className="rounded-md border border-border p-3 text-sm">
+          <p className="font-medium">&quot;{blocked.sequence.name ?? blocked.sequence.id}&quot; cannot launch yet</p>
+          <ul className="mt-1 list-disc pl-5 text-muted-foreground">
+            {blocked.reasons.map((r) => (
+              <li key={r}>{r}</li>
+            ))}
+          </ul>
+          <Button size="sm" variant="ghost" className="mt-1" onClick={() => setBlocked(null)}>
+            Dismiss
+          </Button>
+        </div>
+      ) : null}
       <Table>
         <TableHeader>
           <TableRow>

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

@@ -67,11 +67,12 @@ export function SequenceStats({ sequenceId, pageSize = 25, refreshSeconds, class
     setPage(1);
     setResume(null);
   }, [sequenceId]);
-  const stats = useG8Query((signal) => g8Get(`/sequences/${sequenceId}/stats`, undefined, { signal }), [sequenceId]);
-  const analytics = useG8Query((signal) => g8Get(`/sequences/${sequenceId}/analytics`, undefined, { signal }), [sequenceId]);
+  const stats = useG8Query((signal) => g8Get(`/sequences/${sequenceId}/stats`, undefined, { signal }), [sequenceId], { key: ["sequences", "stats", sequenceId] });
+  const analytics = useG8Query((signal) => g8Get(`/sequences/${sequenceId}/analytics`, undefined, { signal }), [sequenceId], { key: ["sequences", "analytics", sequenceId] });
   const contacts = useG8Query(
     (signal) => g8Get(`/sequences/${sequenceId}/contacts`, { page, limit: pageSize, state: state || undefined }, { signal }),
     [sequenceId, page, pageSize, state],
+    { key: ["sequences", "contacts", sequenceId, { page, pageSize, state }] },
   );
 
   useEffect(() => {

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

@@ -0,0 +1,103 @@
+"use client";
+
+/**
+ * SequenceStepsPanel: the steps of one sequence as records. A list with each step's channel, wait and
+ * progress; open one (deep link via `stepId`) for every field, how many contacts are at each state on it, and
+ * the editor (change the copy, delete it, add steps).
+ *
+ * SDK operations, in order:
+ *   1. listSequenceSteps   GET /sequences/{id}/steps   (read; the steps in order)
+ *   2. getSequenceStats    GET /sequences/{id}/stats   (read; per-step contact counts)
+ *   Editing opens SequenceBuilder, which owns addSequenceSteps (write), updateSequenceStep (external:
+ *   confirmed) and deleteSequenceStep (destructive: confirmed).
+ */
+
+import { useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { fieldItems, fromApiStep, KIND_LABEL, listOf, objectOf, stepSummary } from "../lib/sequencer-utils";
+import type { ApiStep } from "../lib/sequencer-utils";
+import { SequenceBuilder } from "./sequence-builder";
+
+export interface SequenceStepsPanelProps {
+  sequenceId: string;
+  /** The open step (the API step id). Controlled so a screen can deep-link it. */
+  stepId?: string;
+  onStepChange?: (stepId: string | null) => void;
+  /** Called after any edit so the sequence header can refresh. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+interface StepStat { step_id?: string; step_order: number; total_contacts?: number; counts?: Record<string, number> }
+
+export function SequenceStepsPanel({ sequenceId, stepId, onStepChange, onChanged, className }: SequenceStepsPanelProps) {
+  const [editing, setEditing] = useState(false);
+  const [version, setVersion] = useState(0);
+  const steps = useG8Query((signal) => g8Get(`/sequences/${sequenceId}/steps`, undefined, { signal }), [sequenceId, version], { key: ["sequences", "steps", sequenceId] });
+  const stats = useG8Query((signal) => g8Get(`/sequences/${sequenceId}/stats`, undefined, { signal }), [sequenceId, version], { key: ["sequences", "stats", sequenceId] });
+  const rows = listOf<ApiStep>(steps.data).sort((a, b) => a.step_order - b.step_order);
+  const statRows = (objectOf(stats.data).step_stats as StepStat[] | undefined) ?? [];
+  const statFor = (s: ApiStep) => statRows.find((x) => (x.step_id && x.step_id === s.id) || x.step_order === s.step_order);
+  const open = rows.find((s) => s.id === stepId);
+  const refresh = () => { setVersion((v) => v + 1); onChanged?.(); };
+
+  if (steps.error) return <ApiError error={steps.error} title="Could not load the steps" onRetry={() => void steps.refetch()} className={className} />;
+  if (steps.loading && !steps.data) return <Skeleton className={`h-40 w-full ${className ?? ""}`} />;
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium">Steps</h3>
+        <Button size="sm" variant="outline" onClick={() => setEditing((e) => !e)}>{editing ? "Done editing" : "Edit or add steps"}</Button>
+      </div>
+      {editing ? (
+        <SequenceBuilder sequenceId={sequenceId} onSaved={refresh} />
+      ) : rows.length === 0 ? (
+        <EmptyState title="No steps yet" description="Add the first email, LinkedIn touch or call." action={<Button onClick={() => setEditing(true)}>Add a step</Button>} />
+      ) : (
+        <ol aria-label="Steps" className="divide-y rounded-md border">
+          {rows.map((s) => {
+            const draft = fromApiStep(s);
+            const st = statFor(s);
+            return (
+              <li key={s.id ?? s.step_order} className={`flex items-center gap-3 px-3 py-2 text-sm ${s.id && s.id === stepId ? "bg-muted" : ""}`}>
+                <span className="w-6 text-muted-foreground tabular-nums">{s.step_order}</span>
+                <StatusPill tone="neutral">{KIND_LABEL[draft.kind]}</StatusPill>
+                <button type="button" className="min-w-0 flex-1 truncate text-left font-medium hover:underline" aria-label={`Open step ${s.step_order}`} onClick={() => onStepChange?.(s.id ?? null)}>
+                  {stepSummary(draft)}
+                </button>
+                <span className="text-xs text-muted-foreground">after {draft.wait_days} d</span>
+                {st?.total_contacts != null ? <span className="text-xs tabular-nums">{st.total_contacts} contacts</span> : null}
+              </li>
+            );
+          })}
+        </ol>
+      )}
+      {!editing && open ? (
+        <SectionCard
+          title={`Step ${open.step_order}: ${stepSummary(fromApiStep(open))}`}
+          actions={<Button size="sm" variant="ghost" onClick={() => onStepChange?.(null)}>Close step</Button>}
+        >
+          <KeyValueList
+            columns={2}
+            items={[
+              ...fieldItems({ step_type: open.step_type, input_type: open.input_type, wait_days: fromApiStep(open).wait_days }),
+              ...fieldItems((open.step_data ?? {}) as Record<string, unknown>),
+            ]}
+          />
+          {statFor(open)?.counts ? (
+            <KeyValueList columns={2} items={Object.entries(statFor(open)!.counts!).map(([k, v]) => ({ label: `Contacts ${k.replace(/_/g, " ")}`, value: String(v) }))} />
+          ) : null}
+          <Button size="sm" onClick={() => setEditing(true)}>Edit this sequence's steps</Button>
+        </SectionCard>
+      ) : null}
+    </div>
+  );
+}