@graph8/sdk 0.362.0 → 0.373.0

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

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

@@ -0,0 +1,162 @@
+"use client";
+
+/**
+ * SequencesScreen: the finished "Sequences" page (the Apollo / Outreach sequencer).
+ *
+ * Composes: SequenceList (status, launch, pause, resume, duplicate, archive), SequenceBuilder (create a draft,
+ * edit steps), SequenceStats (totals, per-step progress, per-contact pause/resume), EnrollDialog, plus the
+ * lists block ListPicker and the crm block ContactTable to choose who to enroll.
+ *
+ * Every record has a complete detail, beside the list or as a full page (`?view=full`): the sequence
+ * (SequenceDetail), each step (`?step=`) and each enrollment (`?enrollment=`).
+ *
+ * User flows:
+ *   - Browse sequences, filter by status, see live/paused/draft counts at a glance.
+ *   - "New sequence" opens a sheet with the builder (sender, audience list, email/LinkedIn/call steps); the new
+ *     draft opens right away. Nothing is sent until it is launched.
+ *   - Launch (after a preview that checks each step's copy and sender; a launch that would 400 is refused with the
+ *     reasons), pause, resume, duplicate, archive from the list (all confirmed).
+ *   - Open a sequence (deep link `?id=`): Results (stats, contacts, pause/resume one), Steps (edit copy), and
+ *     "Enroll contacts": pick a list, tick contacts, confirm the recipient count.
+ *
+ * SDK operations of its own (both read):
+ *   1. listSequences  GET /sequences?limit=100  (counts for the stat strip)
+ *   2. getSequence    GET /sequences/{id}       (header of the open sequence; also gives associated_list_id)
+ * Everything that reaches real people is confirmed in the composed parts.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { ListOrdered, Plus } from "lucide-react";
+import { Button } from "@graph8/sdk/ui";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import type { StatItem } from "@/g8/components/screen/stat-strip";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get } from "@/g8/lib/g8-client";
+import { listOf, statusGroup } from "../lib/sequencer-utils";
+import type { SequenceRow } from "../lib/sequencer-utils";
+import { SequenceBuilder } from "./sequence-builder";
+import { SequenceDetail } from "./sequence-detail";
+import { SequenceList } from "./sequence-list";
+
+export interface SequencesScreenProps {
+  /** Owner email sent with a new sequence (`user_email`). */
+  ownerEmail?: string;
+  /** Extra buttons in the toolbar. */
+  toolbarActions?: ReactNode;
+  /** Extra buttons in the open sequence's header. */
+  renderDetailActions?: (sequence: SequenceRow) => ReactNode;
+  /** Extra tabs in the open sequence's panel. */
+  extraDetailTabs?: { id: string; label: string; render: (sequence: SequenceRow) => ReactNode }[];
+  /** Open an enrolled person in your contacts screen; without it the Contacts tab has no such button. */
+  onOpenContact?: (contactId: number) => void;
+  className?: string;
+}
+
+const FILTERS = [
+  { value: "", label: "All statuses" },
+  { value: "drafted", label: "Drafts" },
+  { value: "live", label: "Live" },
+  { value: "paused", label: "Paused" },
+];
+const SUMMARY_LIMIT = 100;
+
+/** Counts by status group for the stat strip. Exported for tests. */
+export function sequenceStats(rows: SequenceRow[]): StatItem[] {
+  const n = (g: ReturnType<typeof statusGroup>) => rows.filter((r) => statusGroup(r.status) === g).length;
+  const hint = rows.length >= SUMMARY_LIMIT ? `First ${SUMMARY_LIMIT} sequences` : undefined;
+  const live = rows.filter((r) => statusGroup(r.status) === "live");
+  return [
+    { label: "Live", value: n("live"), tone: "positive", hint },
+    { label: "Paused", value: n("paused"), tone: "warning", hint },
+    { label: "Drafts", value: n("draft"), hint },
+    { label: "Contacts in live", value: live.reduce((a, r) => a + (r.contact_count ?? 0), 0).toLocaleString(), hint },
+  ];
+}
+
+export function SequencesScreen(props: SequencesScreenProps) {
+  const { ownerEmail, toolbarActions, className } = props;
+  const [selectedId, setSelectedId] = useUrlState("id", "");
+  const [detailTab, setDetailTab] = useUrlState("dtab", "");
+  const [view, setView] = useUrlState("view", "");
+  const [stepId, setStepId] = useUrlState("step", "");
+  const [contactId, setContactId] = useUrlState("enrollment", "");
+  const [status, setStatus] = useUrlState("status", "");
+  const [creating, setCreating] = useState(false);
+  const [version, setVersion] = useState(0);
+  const [listKey, setListKey] = useState(0);
+  const summary = useG8Query((signal) => g8Get("/sequences", { limit: SUMMARY_LIMIT }, { signal }), [version], { key: ["sequences", "summary"] });
+  const stats = summary.data ? sequenceStats(listOf<SequenceRow>(summary.data)) : undefined;
+  const bump = () => setVersion((v) => v + 1);
+  const open = (id: string) => { setSelectedId(id); setDetailTab(null); setStepId(null); setContactId(null); };
+  const close = () => { setSelectedId(null); setDetailTab(null); setStepId(null); setContactId(null); setView(null); };
+  const refreshList = () => { setListKey((k) => k + 1); bump(); };
+
+  return (
+    <ScreenLayout
+      className={className}
+      title="Sequences"
+      description="Multi-channel outreach that runs on its own: build steps, enroll contacts, watch replies."
+      icon={<ListOrdered className="h-5 w-5" aria-hidden />}
+      actions={
+        <Button onClick={() => setCreating(true)}>
+          <Plus className="mr-1 h-4 w-4" aria-hidden /> New sequence
+        </Button>
+      }
+      stats={stats}
+    >
+      <div className="space-y-3">
+        <Toolbar
+          actions={toolbarActions}
+          filters={
+            <select aria-label="Status" className="h-9 rounded-md border bg-background px-2 text-sm" value={status} onChange={(e) => setStatus(e.target.value || null)}>
+              {FILTERS.map((f) => <option key={f.value} value={f.value}>{f.label}</option>)}
+            </select>
+          }
+        />
+        <SplitView
+          expanded={view === "full"} onExpandedChange={(e) => setView(e ? "full" : null)}
+          detailOpen={Boolean(selectedId)}
+          onCloseDetail={close}
+          list={
+            <SequenceList key={`${listKey}:${status}`} status={status || undefined} onOpen={(s) => open(s.id)} onCreate={() => setCreating(true)} onChanged={bump} />
+          }
+          detail={
+            selectedId ? (
+              <SequenceDetail
+                key={selectedId}
+                sequenceId={selectedId}
+                onExpand={view === "full" ? undefined : () => setView("full")} onCollapse={view === "full" ? () => setView(null) : undefined}
+                tab={detailTab || undefined}
+                onTabChange={(t) => setDetailTab(t === "details" ? null : t)}
+                stepId={stepId || undefined}
+                onStepChange={(v) => setStepId(v)}
+                contactId={contactId || undefined}
+                onContactChange={(v) => setContactId(v)}
+                onOpenContact={props.onOpenContact}
+                onClose={close}
+                onChanged={refreshList}
+                refreshKey={version}
+                onOpenSequence={open}
+                renderActions={props.renderDetailActions}
+                extraTabs={props.extraDetailTabs}
+              />
+            ) : null
+          }
+        />
+      </div>
+      <FormSheet open={creating} onOpenChange={setCreating} width="xl" title="New sequence" description="Saved as a draft. Nobody is contacted until you launch it.">
+        {creating ? (
+          <SequenceBuilder
+            ownerEmail={ownerEmail}
+            onSaved={(id) => { setCreating(false); refreshList(); open(id); }}
+          />
+        ) : null}
+      </FormSheet>
+    </ScreenLayout>
+  );
+}

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

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

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

@@ -10,7 +10,8 @@ export type StepKind = "email" | "linkedin" | "call" | "task";
 
 /** UI step kind -> the API `step_type`. `linkedin` is HeyReach; `task` is a manual dialer task. */
 export const STEP_TYPE: Record<StepKind, string> = { email: "EMAIL", linkedin: "HEYREACH", call: "PHONE", task: "MANUAL_DIALER" };
-export const KIND_LABEL: Record<StepKind, string> = { email: "Email", linkedin: "LinkedIn", call: "Call", task: "Call task" };
+/** `call` is an AI voice-agent call (PHONE); `task` is a call a rep makes from the dialer (MANUAL_DIALER). */
+export const KIND_LABEL: Record<StepKind, string> = { email: "Email", linkedin: "LinkedIn", call: "AI call", task: "Call task" };
 export const KINDS = Object.keys(STEP_TYPE) as StepKind[];
 
 export const LINKEDIN_ACTIONS = ["CONNECTION_REQUEST", "MESSAGE", "INMAIL", "FOLLOW", "VIEW_PROFILE", "LIKE_POST"] as const;
@@ -29,6 +30,8 @@ export interface DraftStep {
   step_data: Record<string, unknown>;
   /** True once changed since it was loaded or saved. */
   dirty?: boolean;
+  /** The API `step_type` a loaded step had (for example NETRION), so saving it never rewrites the provider. */
+  step_type?: string;
 }
 
 export interface SequenceRow {
@@ -77,17 +80,23 @@ export function fromApiStep(s: ApiStep): DraftStep {
     key: s.id ?? newKey(),
     id: s.id,
     kind: kindOf(s.step_type),
+    step_type: s.step_type,
     input_type: (s.input_type as InputType) ?? "MANUAL_TEMPLATE",
     wait_days: (s.time_interval ?? 0) / 86400,
     step_data: { ...(s.step_data ?? {}) },
   };
 }
 
-/** The request shape for create and add-steps. `order` is 1-based. */
-export function toApiStep(step: DraftStep, order: number) {
+/**
+ * The request shape for create, update and add-steps. `order` is 1-based. `linkedinStepType` is the LinkedIn
+ * provider step for NEW LinkedIn steps (`HEYREACH`, or `NETRION`); a loaded step keeps its own `step_type`.
+ */
+export function toApiStep(step: DraftStep, order: number, linkedinStepType?: string) {
+  // A loaded step keeps its own type (a NETRION step stays NETRION) as long as its kind did not change.
+  const own = step.step_type && kindOf(step.step_type) === step.kind ? step.step_type : undefined;
   return {
     step_order: order,
-    step_type: STEP_TYPE[step.kind],
+    step_type: own ?? (step.kind === "linkedin" && linkedinStepType ? linkedinStepType : STEP_TYPE[step.kind]),
     input_type: step.input_type,
     time_interval: Math.max(0, Math.round(step.wait_days * 86400)),
     step_data: step.step_data,
@@ -133,11 +142,11 @@ export function statusGroup(status: string | null | undefined): "draft" | "live"
 }
 
 export const STATUS_CLASS: Record<ReturnType<typeof statusGroup>, string> = {
-  draft: "bg-gray-100 text-gray-700",
-  live: "bg-green-100 text-green-800",
-  paused: "bg-amber-100 text-amber-800",
-  ended: "bg-slate-100 text-slate-600",
-  busy: "bg-blue-100 text-blue-800",
+  draft: "bg-muted text-foreground",
+  live: "bg-positive text-positive-foreground",
+  paused: "bg-warning text-warning-foreground",
+  ended: "bg-muted text-muted-foreground",
+  busy: "bg-info text-info-foreground",
 };
 
 export function listOf<T>(envelope: unknown): T[] {
@@ -153,7 +162,96 @@ export function objectOf(envelope: unknown): Record<string, unknown> {
   return data && typeof data === "object" && !Array.isArray(data) ? (data as Record<string, unknown>) : {};
 }
 
-/** Map a mailbox's provider to the sequence channel type the API takes. */
+export type EmailChannelType = "GMAIL" | "INBOXKIT" | "SMTP";
+
+export interface MailboxLike {
+  provider?: string | null;
+  /** inboxkit | manual_google | manual_microsoft | manual_smtp | opensrs | purchased (GET /mailboxes). */
+  source?: string | null;
+}
+
+/**
+ * The sequence channel type for a mailbox, decided by `source` first, as the graph8 app does: an InboxKit mailbox
+ * is INBOXKIT whatever its provider (a Google-backed InboxKit mailbox attached as GMAIL fails at send time),
+ * Google is GMAIL, SMTP is SMTP. `null` = this mailbox cannot send from a sequence (see `mailboxUnsupportedReason`).
+ */
+export function mailboxChannelType(mailbox: MailboxLike): EmailChannelType | null {
+  const source = (mailbox.source ?? "").toLowerCase();
+  const provider = (mailbox.provider ?? "").toLowerCase();
+  if (source === "inboxkit") return "INBOXKIT";
+  if (source === "manual_microsoft" || provider === "microsoft") return null;
+  if (provider === "google_mailbox" || source === "manual_google") return "GMAIL";
+  if (provider === "smtp" || source === "manual_smtp") return "SMTP";
+  // An API without `source` (older graph8): fall back to the provider guess.
+  return source ? null : channelTypeFor(provider);
+}
+
+/** Why a mailbox cannot be picked as a sequence sender, or null when it can. */
+export function mailboxUnsupportedReason(mailbox: MailboxLike): string | null {
+  if (mailboxChannelType(mailbox)) return null;
+  const microsoft = (mailbox.source ?? "").toLowerCase() === "manual_microsoft" || (mailbox.provider ?? "").toLowerCase() === "microsoft";
+  return microsoft
+    ? "Directly connected Microsoft mailboxes cannot send from sequences yet"
+    : "This mailbox type cannot send from sequences yet";
+}
+
+/** The senders a set of steps needs. `call` (AI) needs an AI number, `task` a dialer number. */
+export function requiredSenders(kinds: Iterable<StepKind>): { email: boolean; aiPhone: boolean; dialerPhone: boolean; linkedin: boolean } {
+  const set = new Set(kinds);
+  return { email: set.has("email"), aiPhone: set.has("call"), dialerPhone: set.has("task"), linkedin: set.has("linkedin") };
+}
+
+const EMAIL_TYPES = new Set(["SMTP", "GMAIL", "INBOXKIT"]);
+
+/**
+ * What stops a sequence from launching, read from GET /sequences/{id}/preview (`steps[].step_type` and
+ * `channels[].channel_type`): the API refuses `/run` with 400 when a step type has no sender channel. Checked
+ * client-side so a launch is never offered that can only fail.
+ */
+export function senderGaps(steps: Array<{ step_type?: string | null }>, channels: Array<{ channel_type?: string | null }>): string[] {
+  const types = new Set(steps.map((s) => (s.step_type ?? "").toUpperCase()));
+  const have = new Set(channels.map((c) => (c.channel_type ?? "").toUpperCase()));
+  const gaps: string[] = [];
+  if (types.has("EMAIL") && ![...have].some((t) => EMAIL_TYPES.has(t))) gaps.push("Email steps have no mailbox to send from.");
+  if ((types.has("PHONE") || types.has("MANUAL_DIALER")) && !have.has("PHONE"))
+    gaps.push("Call steps have no phone number to call from.");
+  if (types.has("HEYREACH") && !have.has("LINKEDIN")) gaps.push("LinkedIn steps have no LinkedIn account to send from.");
+  if (types.has("NETRION") && !have.has("LINKEDIN_NETRION")) gaps.push("LinkedIn steps have no LinkedIn account to send from.");
+  if (types.has("SMS") && !have.has("SMS")) gaps.push("SMS steps have no number to text from.");
+  return gaps;
+}
+
+interface PreviewIssue {
+  message?: string;
+  severity?: string;
+}
+
+/**
+ * Launch check from GET /sequences/{id}/preview. The verdict lives on each step: `steps[].rendered.will_send_as_shown`
+ * and `steps[].rendered.content_issues` (a top-level copy is read too, for older APIs). An error-severity issue
+ * makes `/run` answer 400, so it blocks; anything else is a warning. A missing sender also blocks.
+ */
+export function launchCheck(preview: Record<string, unknown>): { warnings: string[]; blockers: string[] } {
+  const steps = (Array.isArray(preview.steps) ? preview.steps : []) as Array<Record<string, unknown>>;
+  const channels = (Array.isArray(preview.channels) ? preview.channels : []) as Array<{ channel_type?: string | null }>;
+  const warnings: string[] = [];
+  const blockers: string[] = [];
+  const read = (verdict: Record<string, unknown> | null | undefined, where: string) => {
+    if (!verdict) return;
+    const issues = (Array.isArray(verdict.content_issues) ? verdict.content_issues : []) as PreviewIssue[];
+    for (const issue of issues) {
+      const text = `${where}${issue.message ?? "The copy will not send as shown."}`;
+      ((issue.severity ?? "").toLowerCase() === "error" ? blockers : warnings).push(text);
+    }
+    if (verdict.will_send_as_shown === false && issues.length === 0) warnings.push(`${where}The copy will not send as shown.`);
+  };
+  steps.forEach((step, i) => read(step.rendered as Record<string, unknown> | undefined, `Step ${Number(step.step_order ?? i + 1)}: `));
+  read(preview, "");
+  blockers.push(...senderGaps(steps as Array<{ step_type?: string | null }>, channels));
+  return { warnings: [...new Set(warnings)], blockers: [...new Set(blockers)] };
+}
+
+/** Map a mailbox's provider to the sequence channel type the API takes. Prefer `mailboxChannelType`, which reads `source`. */
 export function channelTypeFor(provider: string | null | undefined): "GMAIL" | "INBOXKIT" | "SMTP" {
   const p = (provider ?? "").toLowerCase();
   if (p.includes("gmail") || p.includes("google")) return "GMAIL";
@@ -166,3 +264,28 @@ export function newIdempotencyKey(): string {
     ? crypto.randomUUID()
     : `g8-${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
+
+const HIDDEN_FIELDS = /password|secret|token|credential/i;
+
+/** Every readable field of an open-shaped record as label/value pairs (secrets are never shown). */
+export function fieldItems(obj: Record<string, unknown>): Array<{ label: string; value: string }> {
+  return Object.entries(obj)
+    .filter(([k, v]) => !HIDDEN_FIELDS.test(k) && v !== null && v !== undefined && v !== "")
+    .map(([k, v]) => {
+      const label = k.replace(/_/g, " ").replace(/^./, (c) => c.toUpperCase());
+      if (typeof v === "string" && /_at$|date$/.test(k) && !Number.isNaN(new Date(v).getTime()))
+        return { label, value: new Date(v).toLocaleString("en-US", { dateStyle: "medium", timeStyle: "short", timeZone: "UTC" }) + " UTC" };
+      if (typeof v === "boolean") return { label, value: v ? "Yes" : "No" };
+      if (typeof v === "object") return { label, value: JSON.stringify(v) };
+      return { label, value: String(v) };
+    });
+}
+
+/** One line that says what a step does, for lists. */
+export function stepSummary(step: DraftStep): string {
+  const d = step.step_data;
+  const str = (v: unknown) => (typeof v === "string" ? v.trim() : "");
+  if (step.kind === "email") return str(d.subject) || str(d.instructions) || "Email";
+  if (step.kind === "linkedin") return str(d.linkedin_action_type).replace(/_/g, " ").toLowerCase() || "LinkedIn";
+  return KIND_LABEL[step.kind];
+}

package/blocks/sequencer/recipes/create-multichannel-sequence.ts

@@ -1,10 +1,13 @@
 /**
- * @title Create a draft sequence with email, LinkedIn and a call
+ * @title Create a draft sequence with email, LinkedIn and an AI call
  * @when Building outreach. Creating the draft is tier `external` in the contract but contacts nobody; the
- * LAUNCH is what reaches people (see launch-and-enroll.ts). Three rules the API only enforces at send time:
+ * LAUNCH is what reaches people (see launch-and-enroll.ts). Rules the API only enforces at send or launch time:
  * 1) an EMAIL step needs `input_type: "MANUAL_TEMPLATE"` or its subject/body are ignored; 2) a LinkedIn
  * (HEYREACH) step needs `linkedin_action_type` and the action's own copy key, never `body`; 3) `time_interval`
- * is in SECONDS. Attach the sender mailbox as a channel; LinkedIn steps also need a LinkedIn sender (app).
+ * is in SECONDS; 4) EVERY step type needs its own sender channel or POST /sequences/{id}/run answers 400: the
+ * mailbox (channel type from its `source`), a Voice AI number for PHONE (an AI voice-agent call; a rep's call is
+ * MANUAL_DIALER with a dialer number), a LinkedIn account for HEYREACH; 5) `associated_list_id` is required to
+ * launch and cannot be set later.
  */
 import { g8 } from "@graph8/sdk";
 
@@ -12,7 +15,28 @@ g8.init({ apiKey: process.env.G8_API_KEY! });
 
 const DAY = 86400;
 
-export async function createDraftSequence(name: string, listId: number, mailbox: { id: number; email: string }) {
+/** Sequence channel type for a mailbox from GET /mailboxes: by `source` first, as the graph8 app does. */
+function mailboxChannelType(m: { source?: string | null; provider?: string | null }): "INBOXKIT" | "GMAIL" | "SMTP" {
+  if (m.source === "inboxkit") return "INBOXKIT";
+  if (m.source === "manual_microsoft" || m.provider === "microsoft")
+    throw new Error("Directly connected Microsoft mailboxes cannot send from sequences yet: pick another mailbox");
+  if (m.provider === "google_mailbox" || m.source === "manual_google") return "GMAIL";
+  return "SMTP";
+}
+
+export async function createDraftSequence(name: string, listId: number, sender: { id: number; email: string }) {
+  // The senders, one per step type. Rows are open-shaped (no response schema in the contract): read loosely.
+  const mailboxes = (await g8.api.gtmContext.listMailboxes()).data as Array<{ id: string; email: string; source?: string; provider?: string }>;
+  const mailbox = mailboxes.find((m) => Number(m.id) === sender.id);
+  if (!mailbox) throw new Error(`Mailbox ${sender.id} not found`);
+  const mailboxId = sender.id;
+  const phones = (await g8.api.sequences.listSequencerPhoneNumbers()).data as { phone_numbers?: Array<{ id: number; phone_number: string; inbound_type?: string }> };
+  const aiNumber = (phones.phone_numbers ?? []).find((p) => p.inbound_type === "ai");
+  const linkedin = (await g8.api.sequences.listLinkedinAccounts()).data as { linkedin_accounts?: Array<{ id: number; name?: string }>; provider?: string };
+  const account = linkedin.linkedin_accounts?.[0];
+  if (!aiNumber || !account || linkedin.provider !== "HEYREACH")
+    throw new Error("This recipe needs a Voice AI number and a HeyReach LinkedIn account (connect them in the graph8 app)");
+
   const created = await g8.api.sequenceLifecycle.createSequence({
     body: {
       name,
@@ -44,7 +68,11 @@ export async function createDraftSequence(name: string, listId: number, mailbox:
           step_data: { dial_dnc: false, phone_options: ["mobile", "direct"] },
         },
       ],
-      channels: [{ channel_id: mailbox.id, channel_value: mailbox.email, channel_type: "SMTP" }],
+      channels: [
+        { channel_id: mailboxId, channel_value: mailbox.email, channel_type: mailboxChannelType(mailbox) },
+        { channel_id: aiNumber.id, channel_value: aiNumber.phone_number, channel_type: "PHONE" },
+        { channel_id: account.id, channel_value: account.name ?? String(account.id), channel_type: "LINKEDIN" },
+      ],
     },
   });
   return created.data?.id;

package/blocks/sequencer/recipes/launch-and-enroll.ts

@@ -19,9 +19,26 @@ export async function launchAndEnroll(sequenceId: string, listId: number, contac
   if ((verdict.data as { safe_to_send?: boolean } | undefined)?.safe_to_send === false)
     throw new Error("Deliverability says not safe to send right now");
 
+  // The copy verdict is PER STEP (`steps[].rendered`), not on the preview itself. An error-severity issue makes
+  // /run answer 400; anything else is a warning to show the human. Every step type also needs a sender channel.
   const preview = await g8.api.sequenceLifecycle.previewSequence({ path: { sequence_id: sequenceId } });
-  const issues = (preview.data as { content_issues?: unknown[]; will_send_as_shown?: boolean } | undefined)?.content_issues ?? [];
-  if (issues.length) throw new Error(`Fix the copy first: ${JSON.stringify(issues)}`);
+  const steps = preview.data?.steps ?? [];
+  const issues = steps.flatMap((s) =>
+    (s.rendered?.content_issues ?? []).map((i) => ({ step: s.step_order, ...(i as { severity?: string; message?: string }) })),
+  );
+  const errors = issues.filter((i) => (i.severity ?? "").toLowerCase() === "error");
+  if (errors.length) throw new Error(`Fix the copy first: ${errors.map((e) => `step ${e.step}: ${e.message}`).join("; ")}`);
+  if (steps.some((s) => s.rendered?.will_send_as_shown === false))
+    console.warn("Some copy will not send exactly as previewed:", JSON.stringify(issues));
+  const types = new Set(steps.map((s) => s.step_type.toUpperCase()));
+  const senders = new Set((preview.data?.channels ?? []).map((c) => (c.channel_type ?? "").toUpperCase()));
+  const missing = [
+    types.has("EMAIL") && !["SMTP", "GMAIL", "INBOXKIT"].some((t) => senders.has(t)) && "a mailbox",
+    (types.has("PHONE") || types.has("MANUAL_DIALER")) && !senders.has("PHONE") && "a phone number",
+    types.has("HEYREACH") && !senders.has("LINKEDIN") && "a LinkedIn account",
+    types.has("NETRION") && !senders.has("LINKEDIN_NETRION") && "a LinkedIn account",
+  ].filter(Boolean);
+  if (missing.length) throw new Error(`Attach ${missing.join(", ")} first (POST /sequences/{id}/channels): /run refuses it`);
 
   const current = await g8.api.sequences.getSequence({ path: { sequence_id: sequenceId } });
   const status = (current.data as { status?: string } | undefined)?.status;