@graph8/sdk 0.308.1 → 0.357.0

package/blocks/sequencer/block.json

@@ -0,0 +1,214 @@
+{
+  "$schema": "../block.schema.json",
+  "id": "sequencer",
+  "title": "Sequencer",
+  "summary": "Build multi-channel outreach sequences (email, LinkedIn, calls), launch and pause them, enroll contacts, and read performance.",
+  "features": [
+    "multi-channel step builder with send-time rule checks",
+    "launch, pause, resume, duplicate and archive with recipient-count confirmation",
+    "enroll contacts with deliverability warning",
+    "per-step stats, skip reasons and per-contact control"
+  ],
+  "dependsOn": [
+    "lists",
+    "mailboxes"
+  ],
+  "operations": [
+    "list_sequences_sequences_get",
+    "preview_sequence_sequences__sequence_id__preview_get",
+    "run_sequence_sequences__sequence_id__run_post",
+    "pause_sequence_sequences__sequence_id__pause_post",
+    "resume_sequence_sequences__sequence_id__resume_post",
+    "duplicate_sequence_sequences__sequence_id__duplicate_post",
+    "archive_sequence_sequences__sequence_id__archive_post",
+    "list_mailboxes_mailboxes_get",
+    "list_lists_lists_get",
+    "create_sequence_sequences_post",
+    "list_sequence_steps_sequences__sequence_id__steps_get",
+    "get_sequence_sequences__sequence_id__get",
+    "add_sequence_steps_sequences__sequence_id__steps_post",
+    "update_sequence_step_sequences__sequence_id__steps__step_id__patch",
+    "delete_sequence_step_sequences__sequence_id__steps__step_id__delete",
+    "get_outreach_connection_integrations_linkedin_outreach_connection_get",
+    "get_safe_to_send_deliverability_safe_to_send_get",
+    "add_contacts_to_sequence_sequences__sequence_id__contacts_post",
+    "get_sequence_stats_sequences__sequence_id__stats_get",
+    "get_sequence_analytics_sequences__sequence_id__analytics_get",
+    "list_sequence_contacts_sequences__sequence_id__contacts_get",
+    "pause_sequence_contact_sequences__sequence_id__contacts__contact_id__pause_post",
+    "resume_sequence_contact_sequences__sequence_id__contacts__contact_id__resume_post"
+  ],
+  "components": [
+    {
+      "name": "SequenceList",
+      "file": "components/sequence-list.tsx",
+      "purpose": "All sequences with status; launch (after a copy preview), pause, resume, duplicate and archive, each confirmed with the recipient count.",
+      "operations": [
+        "list_sequences_sequences_get",
+        "preview_sequence_sequences__sequence_id__preview_get",
+        "run_sequence_sequences__sequence_id__run_post",
+        "pause_sequence_sequences__sequence_id__pause_post",
+        "resume_sequence_sequences__sequence_id__resume_post",
+        "duplicate_sequence_sequences__sequence_id__duplicate_post",
+        "archive_sequence_sequences__sequence_id__archive_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "SequenceBuilder",
+      "file": "components/sequence-builder.tsx",
+      "purpose": "Build a draft with email, LinkedIn, call and call-task steps and a sender, or edit the steps of an existing sequence.",
+      "operations": [
+        "list_mailboxes_mailboxes_get",
+        "list_lists_lists_get",
+        "create_sequence_sequences_post",
+        "list_sequence_steps_sequences__sequence_id__steps_get",
+        "get_sequence_sequences__sequence_id__get",
+        "add_sequence_steps_sequences__sequence_id__steps_post",
+        "update_sequence_step_sequences__sequence_id__steps__step_id__patch",
+        "delete_sequence_step_sequences__sequence_id__steps__step_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external",
+        "destructive"
+      ]
+    },
+    {
+      "name": "StepEditor",
+      "file": "components/step-editor.tsx",
+      "purpose": "Controlled form for one step with the rules the API only enforces at send time; shows LinkedIn sender readiness.",
+      "operations": [
+        "get_outreach_connection_integrations_linkedin_outreach_connection_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "EnrollDialog",
+      "file": "components/enroll-dialog.tsx",
+      "purpose": "Confirm and enroll contact ids into a sequence, showing the recipient count and a deliverability warning.",
+      "operations": [
+        "get_sequence_sequences__sequence_id__get",
+        "get_safe_to_send_deliverability_safe_to_send_get",
+        "add_contacts_to_sequence_sequences__sequence_id__contacts_post"
+      ],
+      "tiers": [
+        "read",
+        "external"
+      ]
+    },
+    {
+      "name": "SequenceStats",
+      "file": "components/sequence-stats.tsx",
+      "purpose": "Totals, per-step progress, skip reasons and per-contact state with pause and (confirmed) resume.",
+      "operations": [
+        "get_sequence_stats_sequences__sequence_id__stats_get",
+        "get_sequence_analytics_sequences__sequence_id__analytics_get",
+        "list_sequence_contacts_sequences__sequence_id__contacts_get",
+        "pause_sequence_contact_sequences__sequence_id__contacts__contact_id__pause_post",
+        "resume_sequence_contact_sequences__sequence_id__contacts__contact_id__resume_post"
+      ],
+      "tiers": [
+        "read",
+        "write",
+        "external"
+      ]
+    }
+  ],
+  "hooks": [],
+  "lib": [
+    {
+      "file": "lib/sequencer-utils.ts",
+      "purpose": "Step kinds and the draft-to-API mapping, send-time rule checks, status helpers and envelope readers."
+    }
+  ],
+  "recipes": [
+    {
+      "file": "recipes/create-multichannel-sequence.ts",
+      "title": "Create a draft sequence with email, LinkedIn and a call",
+      "when": "Building outreach; creating the draft contacts nobody."
+    },
+    {
+      "file": "recipes/launch-and-enroll.ts",
+      "title": "Check a draft, launch it, and enroll contacts",
+      "when": "Starting outreach; reaches real people, needs approval of the recipient count."
+    },
+    {
+      "file": "recipes/sequence-report.ts",
+      "title": "Report how a sequence is doing",
+      "when": "A daily digest or an agent deciding whether to pause."
+    },
+    {
+      "file": "recipes/pause-when-unsafe.ts",
+      "title": "Pause live sequences when deliverability turns bad",
+      "when": "A scheduled guard under a standing human instruction."
+    }
+  ],
+  "prerequisites": [
+    {
+      "id": "sender-mailbox",
+      "description": "At least one connected sending mailbox (the mailboxes block). Google and Microsoft mailboxes are connected in the graph8 app.",
+      "where": "api",
+      "verify": "GET /mailboxes returns a mailbox with connection_status active."
+    },
+    {
+      "id": "audience-list",
+      "description": "The contacts to enroll are saved in a list; enrollment needs both the contact ids and their list id.",
+      "where": "api",
+      "verify": "GET /lists returns the list and it contains the contacts."
+    },
+    {
+      "id": "linkedin-sender",
+      "description": "LinkedIn steps need a connected LinkedIn sender account, set up in the graph8 app. A sequence with LinkedIn steps and no sender cannot launch.",
+      "where": "app",
+      "verify": "GET /integrations/linkedin-outreach/connection returns connected: true."
+    }
+  ],
+  "scopes": [
+    "campaigns:read",
+    "integrations:read",
+    "lists:read",
+    "sequences:delete",
+    "sequences:read",
+    "sequences:run",
+    "sequences:write"
+  ],
+  "defaults": [
+    {
+      "decision": "Days between steps",
+      "default": "2 days (the first step starts on enrollment)",
+      "askHuman": false
+    },
+    {
+      "decision": "Stop the sequence when a contact replies",
+      "default": "Yes (finish_on_reply)",
+      "askHuman": false
+    },
+    {
+      "decision": "Email copy source",
+      "default": "The person writes it (MANUAL_TEMPLATE); AI modes are opt-in",
+      "askHuman": false
+    },
+    {
+      "decision": "Who to enroll and when to launch",
+      "default": "Never launch or enroll without a human approving the recipient count",
+      "askHuman": true
+    },
+    {
+      "decision": "Call steps and do-not-call numbers",
+      "default": "Phone steps never dial do-not-call numbers",
+      "askHuman": false
+    }
+  ],
+  "peerDependencies": {
+    "react": ">=18"
+  }
+}

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

@@ -0,0 +1,93 @@
+"use client";
+
+/**
+ * EnrollDialog: add contacts to a sequence, behind a confirmation that states how many real people will be
+ * contacted. Render it when the person clicks "Enroll"; it owns the confirm step and the call.
+ *
+ * SDK operations, in order:
+ *   1. getSequence            GET  /sequences/{id}                 (read; only when `listId` is not passed: reads the
+ *                             sequence's associated_list_id, which the enroll call requires)
+ *   2. getSafeToSend          GET  /deliverability/safe-to-send    (read; shown as a warning, never blocks)
+ *   3. addContactsToSequence  POST /sequences/{id}/contacts        (external tier: confirmed with the recipient count;
+ *                             sent with an Idempotency-Key)
+ *
+ * Tiers: step 3 reaches real people. The call is idempotent server-side (contacts already enrolled are
+ * skipped, `contacts_affected` counts only the new ones). `contactIds` come from your CRM table
+ * (crm block) and `listId` from the lists block; both are required by the API. Search results are
+ * masked until saved to a list, so enroll contacts that are already in a list.
+ */
+
+import { useRef } from "react";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { newIdempotencyKey, objectOf } from "../lib/sequencer-utils";
+
+export interface EnrollDialogProps {
+  open: boolean;
+  sequenceId: string;
+  sequenceName?: string;
+  /** Contact ids to enroll (from the crm block's table selection). */
+  contactIds: readonly number[];
+  /** The list those contacts came from. Default: the sequence's associated list. */
+  listId?: number;
+  onClose: () => void;
+  onEnrolled?: (result: { contactsAffected: number }) => void;
+}
+
+function Verdict() {
+  const verdict = useG8Query((signal) => g8Get("/deliverability/safe-to-send", undefined, { signal }), []);
+  const v = objectOf(verdict.data);
+  if ((v.safe_to_send ?? v.safe) !== false) return null;
+  return (
+    <p role="alert" className="mt-2 rounded bg-amber-50 p-2 text-amber-900">
+      Deliverability warning: {typeof v.reason === "string" ? v.reason : "sending is not recommended right now."}
+    </p>
+  );
+}
+
+export function EnrollDialog({ open, sequenceId, sequenceName, contactIds, listId, onClose, onEnrolled }: EnrollDialogProps) {
+  const key = useRef<{ sig: string; value: string } | null>(null);
+  const sequence = useG8Query((signal) => g8Get(`/sequences/${sequenceId}`, undefined, { signal }), [sequenceId], {
+    enabled: open && listId == null,
+  });
+  const resolvedList = listId ?? (objectOf(sequence.data).associated_list_id as number | undefined);
+
+  const enroll = useG8Mutation(async () => {
+    const body = { contact_ids: [...contactIds], list_id: resolvedList };
+    const sig = JSON.stringify([sequenceId, body]);
+    if (key.current?.sig !== sig) key.current = { sig, value: newIdempotencyKey() };
+    const res = objectOf(await g8Post(`/sequences/${sequenceId}/contacts`, body, { idempotencyKey: key.current.value }));
+    onEnrolled?.({ contactsAffected: Number(res.contacts_affected ?? 0) });
+    onClose();
+  });
+
+  if (!open) return null;
+  const missingList = listId == null && !sequence.loading && resolvedList == null;
+  return (
+    <ConfirmSpendDialog
+      open
+      tier="external"
+      title={`Enroll ${contactIds.length.toLocaleString()} contact${contactIds.length === 1 ? "" : "s"} in "${sequenceName ?? sequenceId}"`}
+      description={
+        <div>
+          <p>They start receiving this sequence's steps. Contacts already enrolled are skipped.</p>
+          {missingList ? (
+            <p role="alert" className="mt-2 text-red-700">
+              This sequence has no audience list. Pass the list these contacts came from as `listId`.
+            </p>
+          ) : null}
+          {enroll.error ? <ApiError error={enroll.error} onRetry={enroll.reset} className="mt-2" /> : null}
+          <Verdict />
+        </div>
+      }
+      recipients={contactIds.length}
+      confirmLabel="Enroll contacts"
+      confirming={enroll.loading || (listId == null && sequence.loading) || missingList || contactIds.length === 0}
+      onCancel={onClose}
+      onConfirm={() => void enroll.mutate(undefined)}
+    />
+  );
+}

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

@@ -0,0 +1,306 @@
+"use client";
+
+/**
+ * SequenceBuilder: build a multi-channel outreach sequence (email, LinkedIn, call, call task) and send it
+ * to graph8 as a DRAFT, or edit the steps of an existing sequence. Nobody is contacted until the sequence
+ * is launched (SequenceList does that).
+ *
+ * SDK operations, in order:
+ *   create:  1. listMailboxes         GET  /mailboxes               (read; the sender)
+ *            2. listLists             GET  /lists                   (read; the audience, becomes associated_list_id)
+ *            3. createSequence        POST /sequences               (external tier: confirmed; steps + sender in ONE call)
+ *   edit:    1. getSequence / listSequenceSteps  GET /sequences/{id}, /sequences/{id}/steps  (read)
+ *            2. addSequenceSteps      POST   /sequences/{id}/steps            (write; appended steps)
+ *            3. updateSequenceStep    PATCH  /sequences/{id}/steps/{step_id}  (external: confirmed; replaces step_data)
+ *            4. deleteSequenceStep    DELETE /sequences/{id}/steps/{step_id}  (destructive: confirmed)
+ *
+ * Ids passed between steps: the chosen mailbox `id` + `email` become the sequence channel; the list `id` becomes
+ * `associated_list_id`; createSequence returns the new sequence `id` (handed to `onSaved`). Changing a LIVE
+ * sequence's copy changes what real people receive, which is why the update dialog says so.
+ */
+
+import { useRef, useState } from "react";
+import { Button, Input, Skeleton } from "@graph8/sdk/ui";
+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 { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import type { ConfirmTier } from "@/g8/components/confirm-spend-dialog";
+import { StepEditor } from "./step-editor";
+import {
+  channelTypeFor,
+  fromApiStep,
+  KIND_LABEL,
+  KINDS,
+  listOf,
+  newIdempotencyKey,
+  newStep,
+  objectOf,
+  statusGroup,
+  stepIssues,
+  toApiStep,
+} from "../lib/sequencer-utils";
+import type { ApiStep, DraftStep, StepKind } from "../lib/sequencer-utils";
+
+export interface SequenceBuilderProps {
+  /** Edit this sequence's steps. Omit to build a new draft. */
+  sequenceId?: string;
+  defaultListId?: number;
+  /** Optional owner email sent as `user_email` on create. */
+  ownerEmail?: string;
+  onSaved?: (sequenceId: string) => void;
+  className?: string;
+}
+
+interface MailboxOption {
+  id: string;
+  email: string | null;
+  provider?: string | null;
+}
+interface ListOption {
+  id: number;
+  title: string;
+  contact_count?: number | null;
+}
+type Pending = { kind: "create" } | { kind: "update" | "delete"; step: DraftStep };
+
+function describe(p: Pending, live: boolean): { tier: ConfirmTier; title: string; description: string; label: string } {
+  if (p.kind === "create")
+    return {
+      tier: "external",
+      title: "Create this sequence as a draft",
+      description: "Saves the steps and sender. Nobody is contacted until you launch it.",
+      label: "Create draft",
+    };
+  if (p.kind === "update")
+    return {
+      tier: "external",
+      title: "Save changes to this step",
+      description: live
+        ? "This sequence is LIVE: contacts will receive the new version from their next send."
+        : "The step's content is replaced with what you see.",
+      label: "Save step",
+    };
+  return {
+    tier: "destructive",
+    title: "Delete this step",
+    description: "Contacts waiting on it move on. This cannot be undone.",
+    label: "Delete step",
+  };
+}
+
+export function SequenceBuilder({ sequenceId, defaultListId, ownerEmail, onSaved, className }: SequenceBuilderProps) {
+  const editing = Boolean(sequenceId);
+  const [name, setName] = useState("");
+  const [mailboxId, setMailboxId] = useState("");
+  const [listId, setListId] = useState(defaultListId ? String(defaultListId) : "");
+  const [steps, setSteps] = useState<DraftStep[]>([]);
+  const [loadedFor, setLoadedFor] = useState<string | null>(null);
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [saved, setSaved] = useState<string | null>(null);
+  // One key per distinct request, so a retry after a timeout cannot create or append twice.
+  const keys = useRef<Record<string, { sig: string; value: string }>>({});
+  const keyFor = (slot: string, payload: unknown): string => {
+    const sig = JSON.stringify(payload);
+    if (keys.current[slot]?.sig !== sig) keys.current[slot] = { sig, value: newIdempotencyKey() };
+    return keys.current[slot].value;
+  };
+
+  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: 200 }, { signal }), [], { enabled: !editing });
+  const lists = useG8Query((signal) => g8Get("/lists", { limit: 100 }, { signal }), [], { enabled: !editing });
+  const existing = useG8Query(
+    async (signal) => {
+      const [seq, list] = await Promise.all([
+        g8Get(`/sequences/${sequenceId}`, undefined, { signal }),
+        g8Get(`/sequences/${sequenceId}/steps`, undefined, { signal }),
+      ]);
+      return { status: String(objectOf(seq).status ?? ""), steps: listOf<ApiStep>(list).map(fromApiStep) };
+    },
+    [sequenceId],
+    { enabled: editing },
+  );
+  if (editing && existing.data && loadedFor !== sequenceId) {
+    setLoadedFor(sequenceId ?? null);
+    setSteps(existing.data.steps);
+  }
+  const live = statusGroup(existing.data?.status) === "live";
+
+  const run = useG8Mutation(async (p: Pending) => {
+    if (p.kind === "create") {
+      const mailbox = listOf<MailboxOption>(mailboxes.data).find((m) => m.id === mailboxId);
+      const body = {
+        name: name.trim(),
+        user_email: ownerEmail,
+        associated_list_id: listId ? Number(listId) : undefined,
+        finish_on_reply: true,
+        steps: steps.map((s, i) => toApiStep(s, i + 1)),
+        channels: mailbox
+          ? [{ channel_id: Number(mailbox.id), channel_value: mailbox.email ?? "", channel_type: channelTypeFor(mailbox.provider) }]
+          : [],
+      };
+      const res = await g8Post<{ id: string }>("/sequences", body, { idempotencyKey: keyFor("create", body) });
+      setSaved(`Draft "${body.name}" created. Launch it from the sequence list.`);
+      if (res.data?.id) onSaved?.(res.data.id);
+    } else if (p.kind === "update" && p.step.id) {
+      const api = toApiStep(p.step, 1);
+      await g8Patch(`/sequences/${sequenceId}/steps/${p.step.id}`, {
+        step_type: api.step_type,
+        input_type: api.input_type,
+        time_interval: api.time_interval,
+        step_data: api.step_data,
+      });
+      setSteps((all) => all.map((s) => (s.key === p.step.key ? { ...s, dirty: false } : s)));
+    } else if (p.kind === "delete" && p.step.id) {
+      await g8Delete(`/sequences/${sequenceId}/steps/${p.step.id}`);
+      setSteps((all) => all.filter((s) => s.key !== p.step.key));
+    }
+  });
+  const append = useG8Mutation(async () => {
+    const fresh = steps.filter((s) => !s.id);
+    const offset = steps.length - fresh.length;
+    const body = { steps: fresh.map((s, i) => toApiStep(s, offset + i + 1)) };
+    await g8Post(`/sequences/${sequenceId}/steps`, body, { idempotencyKey: keyFor("append", body) });
+    // The steps are saved: drop the unsaved copies at once so a second click cannot append them again,
+    // then reload the real list (with ids) instead of trusting the response shape.
+    setSteps((all) => all.filter((s) => s.id));
+    const fresh2 = await existing.refetch();
+    if (fresh2) setSteps(fresh2.steps);
+    onSaved?.(sequenceId!);
+  });
+
+  const add = (kind: StepKind) => setSteps((s) => [...s, { ...newStep(kind), dirty: true }]);
+  const move = (i: number, d: -1 | 1) =>
+    setSteps((s) => {
+      const next = [...s];
+      const j = i + d;
+      if (j < 0 || j >= s.length || s[i].id || s[j].id) return s;
+      [next[i], next[j]] = [next[j], next[i]];
+      return next;
+    });
+  const invalid = steps.some((s) => stepIssues(s).length > 0);
+  const canCreate = name.trim() && steps.length > 0 && !invalid && mailboxId;
+  const fresh = steps.filter((s) => !s.id);
+
+  if (editing && existing.error) return <ApiError error={existing.error} onRetry={() => void existing.refetch()} className={className} />;
+  if (editing && existing.loading && !existing.data) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
+  const copy = pending ? describe(pending, live) : null;
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      {!editing ? (
+        <div className="grid gap-2 sm:grid-cols-3">
+          <Input aria-label="Sequence name" placeholder="Q4 outbound" value={name} onChange={(e) => setName(e.target.value)} />
+          <select
+            aria-label="Send from"
+            className="h-9 rounded-md border border-gray-300 px-2 text-sm"
+            value={mailboxId}
+            onChange={(e) => setMailboxId(e.target.value)}
+          >
+            <option value="">Send from...</option>
+            {listOf<MailboxOption>(mailboxes.data).map((m) => (
+              <option key={m.id} value={m.id}>
+                {m.email}
+              </option>
+            ))}
+          </select>
+          <select
+            aria-label="Audience list"
+            className="h-9 rounded-md border border-gray-300 px-2 text-sm"
+            value={listId}
+            onChange={(e) => setListId(e.target.value)}
+          >
+            <option value="">Audience list (optional)</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>
+        </div>
+      ) : null}
+      {mailboxes.error || lists.error ? (
+        <ApiError
+          error={mailboxes.error ?? lists.error}
+          onRetry={() => {
+            void mailboxes.refetch();
+            void lists.refetch();
+          }}
+        />
+      ) : null}
+
+      <div className="space-y-3">
+        {steps.map((s, i) => (
+          <div key={s.key} className="space-y-1">
+            <StepEditor
+              step={s}
+              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)))}
+            />
+            <div className="flex gap-2 text-xs">
+              {!s.id ? (
+                <>
+                  <button type="button" className="underline" onClick={() => move(i, -1)}>
+                    Move up
+                  </button>
+                  <button type="button" className="underline" onClick={() => move(i, 1)}>
+                    Move down
+                  </button>
+                </>
+              ) : null}
+              {s.id && s.dirty ? (
+                <Button size="sm" disabled={stepIssues(s).length > 0} onClick={() => setPending({ kind: "update", step: s })}>
+                  Save step {i + 1}
+                </Button>
+              ) : null}
+            </div>
+          </div>
+        ))}
+        {steps.length === 0 ? <p className="text-sm text-gray-500">No steps yet. Add the first touch below.</p> : null}
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        {KINDS.map((k) => (
+          <Button key={k} size="sm" variant="outline" onClick={() => add(k)}>
+            Add {KIND_LABEL[k].toLowerCase()}
+          </Button>
+        ))}
+      </div>
+
+      {editing ? (
+        <Button
+          disabled={fresh.length === 0 || fresh.some((s) => stepIssues(s).length > 0) || append.loading}
+          onClick={() => void append.mutate(undefined)}
+        >
+          Add {fresh.length} new step{fresh.length === 1 ? "" : "s"}
+        </Button>
+      ) : (
+        <Button disabled={!canCreate} onClick={() => setPending({ kind: "create" })}>
+          Create draft sequence
+        </Button>
+      )}
+      {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">
+          {saved}
+        </p>
+      ) : null}
+
+      {pending && copy ? (
+        <ConfirmSpendDialog
+          open
+          tier={copy.tier}
+          title={copy.title}
+          description={copy.description}
+          confirmLabel={copy.label}
+          confirming={run.loading}
+          onCancel={() => setPending(null)}
+          onConfirm={() => void run.mutate(pending).then(() => setPending(null))}
+        />
+      ) : null}
+    </div>
+  );
+}