@graph8/sdk 0.303.0 → 0.357.0

package/blocks/campaigns/components/campaign-launch-step.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+/**
+ * CampaignLaunchStep: the last check before a campaign starts messaging real people. Shows what is missing
+ * (audience, steps, a sender), warns when deliverability is poor, lets the person choose the sending
+ * mailboxes, and launches behind a confirmation that states the recipient count.
+ *
+ * SDK operations, in order:
+ *   1. getCampaignFull         GET  /campaigns/{campaign_id}/full           (read; audience attached and its size, steps, is_launched)
+ *   3. listMailboxes           GET  /mailboxes                              (read; active senders to choose from)
+ *   4. getSafeToSend           GET  /deliverability/safe-to-send            (read; a warning, never a block)
+ *   5. launchCampaign          POST /campaigns/{campaign_id}/launch  { sender_mailbox_ids }
+ *                              (external, ConfirmSpendDialog with the recipient count)
+ *
+ * Tiers: 5 begins REAL outreach and cannot be recalled. The result is kept in state, so the button is
+ * gone after a success and a double click cannot launch twice. After an error, do not blindly retry: a 502
+ * `draft_created_activation_failed` or `activation_state_uncertain` means a sequence may exist; check the
+ * campaign in the sequencer block first. `is_launched` from /full also refuses a second launch after a reload. Google and Microsoft mailboxes are connected in the graph8 app.
+ */
+
+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 { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { GRAPH8_APP_MAILBOXES_URL } from "@/g8/mailboxes/lib/mailboxes-utils";
+import { audienceOf, listOf, objectOf, stepsOf } from "../lib/campaigns-utils";
+
+export interface CampaignLaunchStepProps {
+  campaignId: string;
+  /** Contacts on the attached list, when you know it (the wizard passes it). Shown in the confirmation. */
+  audienceSize?: number;
+  onLaunched?: (result: Record<string, unknown>) => void;
+  className?: string;
+}
+
+interface Mailbox { id: string | number; email?: string | null; connection_status?: string | null; is_archived?: boolean | null }
+
+function Check({ ok, children }: { ok: boolean | undefined; children: string }) {
+  return (
+    <li className={ok ? "text-green-700" : "text-amber-800"}>
+      <span aria-hidden>{ok ? "Ready: " : "Missing: "}</span>{children}
+    </li>
+  );
+}
+
+export function CampaignLaunchStep({ campaignId, audienceSize, onLaunched, className }: CampaignLaunchStepProps) {
+  const campaign = useG8Query((signal) => g8Get(`/campaigns/${campaignId}/full`, undefined, { signal }), [campaignId]);
+  const mailboxes = useG8Query((signal) => g8Get("/mailboxes", { limit: 200 }, { signal }), []);
+  const verdict = useG8Query((signal) => g8Get("/deliverability/safe-to-send", undefined, { signal }), []);
+  const [chosen, setChosen] = useState<Set<string> | null>(null);
+  const [confirm, setConfirm] = useState(false);
+  const [result, setResult] = useState<Record<string, unknown> | null>(null);
+
+  const active = listOf<Mailbox>(mailboxes.data).filter((m) => m.connection_status === "active" && !m.is_archived);
+  const senders = chosen ?? new Set(active.slice(0, 1).map((m) => String(m.id)));
+  const launch = useG8Mutation(
+    () => g8Post(`/campaigns/${campaignId}/launch`, { sender_mailbox_ids: [...senders].map(Number) }),
+    {
+      onSuccess: (res) => { const data = objectOf(res); setResult(data); setConfirm(false); onLaunched?.(data); },
+      onError: () => setConfirm(false),
+    },
+  );
+
+  const loading = [campaign, mailboxes].some((q) => q.loading && !q.data);
+  const failedQuery = [campaign, mailboxes].find((q) => q.error);
+  if (failedQuery) return <ApiError error={failedQuery.error} title="Could not check launch readiness" onRetry={() => { void campaign.refetch(); void mailboxes.refetch(); }} />;
+  if (loading) return <Skeleton className="h-40 w-full" />;
+
+  const c = objectOf(campaign.data);
+  const audience = audienceOf(campaign.data);
+  const hasAudience = audience.listId != null;
+  const hasSteps = stepsOf(campaign.data).length > 0;
+  const alreadyLaunched = c.is_launched === true;
+  const recipients = audienceSize ?? audience.size;
+  const v = objectOf(verdict.data);
+  const unsafe = !verdict.error && (v.safe_to_send ?? v.safe) === false;
+  const ready = hasAudience && hasSteps && senders.size > 0 && !result && !alreadyLaunched;
+
+  if (result) {
+    const channels = (result.channels_attached as Array<{ email?: string }> | undefined) ?? [];
+    return (
+      <section aria-label="Launch result" className={`space-y-2 rounded-md border border-green-200 bg-green-50 p-4 ${className ?? ""}`}>
+        <h3 className="font-medium">Campaign {String(result.status ?? "launched")}</h3>
+        <p className="text-sm">{String(result.message ?? "")}</p>
+        <p className="text-sm text-muted-foreground">
+          Sequence {String(result.sequence_id ?? "")} with {String(result.steps_created ?? 0)} steps, sending from {channels.map((m) => m.email).join(", ") || "the chosen mailboxes"}.
+        </p>
+        {Array.isArray(result.warnings) && result.warnings.length > 0 ? <ul className="list-disc pl-5 text-sm text-amber-900">{result.warnings.map((w) => <li key={String(w)}>{String(w)}</li>)}</ul> : null}
+      </section>
+    );
+  }
+  return (
+    <section aria-label="Launch" className={`space-y-3 ${className ?? ""}`}>
+      <h3 className="font-medium">Ready to launch {String(c.name ?? "")}</h3>
+      {alreadyLaunched ? <p role="status" className="rounded bg-green-50 p-2 text-sm text-green-900">This campaign has already been launched. Manage it in the sequencer.</p> : null}
+      <ul className="space-y-1 text-sm">
+        <Check ok={hasAudience}>An audience list is attached</Check>
+        <Check ok={hasSteps}>The sequence has at least one step</Check>
+        <Check ok={senders.size > 0}>At least one active sending mailbox is selected</Check>
+      </ul>
+      {unsafe ? (
+        <p role="alert" className="rounded bg-amber-50 p-2 text-sm text-amber-900">
+          Deliverability warning: {typeof v.reason === "string" ? v.reason : "sending is not recommended right now."}
+        </p>
+      ) : null}
+      <fieldset className="space-y-1">
+        <legend className="text-sm font-medium">Send from</legend>
+        {active.length === 0 ? (
+          <p className="text-sm text-muted-foreground">
+            No active mailbox. <a className="underline" href={GRAPH8_APP_MAILBOXES_URL} target="_blank" rel="noreferrer">Connect one in graph8</a>, or use the mailboxes block.
+          </p>
+        ) : null}
+        {active.map((m) => (
+          <label key={m.id} className="flex items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={senders.has(String(m.id))}
+              onChange={(e) => { const next = new Set(senders); if (e.target.checked) next.add(String(m.id)); else next.delete(String(m.id)); setChosen(next); }}
+            />
+            {m.email ?? `Mailbox ${m.id}`}
+          </label>
+        ))}
+      </fieldset>
+      {launch.error ? (
+        <div className="space-y-1">
+          <ApiError error={launch.error} title="The launch did not complete" />
+          <p className="text-sm text-amber-900">Do not retry blindly. A sequence may already exist; check the campaign before launching again.</p>
+        </div>
+      ) : null}
+      <Button disabled={!ready} loading={launch.loading} onClick={() => setConfirm(true)}>Launch campaign</Button>
+      <ConfirmSpendDialog
+        open={confirm}
+        tier="external"
+        title={`Launch "${String(c.name ?? "this campaign")}"`}
+        description="This starts real outreach to the attached list and cannot be recalled."
+        recipients={recipients}
+        confirmLabel="Launch now"
+        confirming={launch.loading}
+        onConfirm={() => void launch.mutate(undefined)}
+        onCancel={() => setConfirm(false)}
+      />
+    </section>
+  );
+}

package/blocks/campaigns/components/campaign-list.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+/**
+ * CampaignList: every campaign with its status, and the screen to open one (metrics and documents) or
+ * delete it. A page with no required props.
+ *
+ * SDK operations, in order:
+ *   1. listCampaigns   GET    /campaigns?page&limit        (read; page-number, no total: a full page means maybe more)
+ *   2. deleteCampaign  DELETE /campaigns/{campaign_id}     (destructive, ConfirmSpendDialog)
+ *   Opening a row renders CampaignMetrics and CampaignAssets (their own reads) beneath the table.
+ *
+ * Tiers: only 2 is confirmed. A 404 on delete means it is already gone and counts as done; the list is
+ * refetched afterwards and the open campaign is closed if it was the one deleted.
+ */
+
+import { useState } from "react";
+import { Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } 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 { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { formatDate, listOf, statusClass } from "../lib/campaigns-utils";
+import type { CampaignRow } from "../lib/campaigns-utils";
+import { CampaignAssets } from "./campaign-assets";
+import { CampaignMetrics } from "./campaign-metrics";
+
+export interface CampaignListProps {
+  pageSize?: number;
+  /** Called when a row is opened. Without it the row opens metrics and documents below the table. */
+  onOpen?: (campaign: CampaignRow) => void;
+  /** Rendered in the empty state: usually a link to the wizard. */
+  emptyAction?: React.ReactNode;
+  className?: string;
+}
+
+const COLUMNS = 6;
+
+export function CampaignList({ pageSize = 25, onOpen, emptyAction, className }: CampaignListProps) {
+  const [page, setPage] = useState(1);
+  const [openId, setOpenId] = useState<string | null>(null);
+  const [deleting, setDeleting] = useState<CampaignRow | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const list = useG8Query((signal) => g8Get("/campaigns", { page, limit: pageSize }, { signal }), [page, pageSize]);
+
+  const remove = useG8Mutation(async (c: CampaignRow) => {
+    setBusyId(c.id);
+    try {
+      await g8Delete(`/campaigns/${c.id}`);
+    } catch (err) {
+      if ((err as { status?: number }).status !== 404) throw err; // already deleted counts as done
+    } finally {
+      setBusyId(null);
+      setDeleting(null);
+    }
+    setOpenId((id) => (id === c.id ? null : id));
+  }, { onSuccess: () => void list.refetch() });
+
+  const rows = listOf<CampaignRow>(list.data);
+  // GET /campaigns returns a bare array with no pagination block: a full page means there may be more.
+  const hasNext = rows.length >= pageSize;
+  const go = (next: number) => { setPage(next); setOpenId(null); };
+  const open = (c: CampaignRow) => { if (onOpen) onOpen(c); else setOpenId(c.id === openId ? null : c.id); };
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      {list.error ? <ApiError error={list.error} title="Could not load campaigns" onRetry={() => void list.refetch()} /> : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not delete the campaign" /> : null}
+      <Table>
+        <TableHeader>
+          <TableRow><TableHead>Name</TableHead><TableHead>Status</TableHead><TableHead>Category</TableHead><TableHead>Goal</TableHead><TableHead>Created</TableHead><TableHead className="w-40" /></TableRow>
+        </TableHeader>
+        <TableBody>
+          {list.loading && !list.data ? <TableRow><TableCell colSpan={COLUMNS}><Skeleton className="h-6 w-full" /></TableCell></TableRow> : null}
+          {rows.map((c) => (
+            <TableRow key={c.id} data-state={c.id === openId ? "selected" : undefined}>
+              <TableCell className="font-medium">{c.name}</TableCell>
+              <TableCell><span className={`rounded px-2 py-0.5 text-xs ${statusClass(c.status)}`}>{c.status}</span></TableCell>
+              <TableCell>{c.category}</TableCell>
+              <TableCell className="max-w-xs truncate text-muted-foreground">{c.goal}</TableCell>
+              <TableCell>{formatDate(c.created_at)}</TableCell>
+              <TableCell className="space-x-2 text-right">
+                <Button size="sm" variant="outline" aria-label={`Open ${c.name}`} onClick={() => open(c)}>{c.id === openId ? "Close" : "Open"}</Button>
+                <Button size="sm" variant="outline" aria-label={`Delete ${c.name}`} loading={busyId === c.id} onClick={() => setDeleting(c)}>Delete</Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {!list.loading && !list.error && rows.length === 0 ? (
+        <EmptyState title="No campaigns yet" description="Create your first campaign with the wizard." action={emptyAction} />
+      ) : null}
+      {page > 1 || hasNext ? (
+        <div className="flex items-center justify-end gap-2">
+          <Button size="sm" variant="outline" disabled={page <= 1} onClick={() => go(page - 1)}>Previous</Button>
+          <span className="text-sm text-muted-foreground">Page {page}</span>
+          <Button size="sm" variant="outline" disabled={!hasNext} onClick={() => go(page + 1)}>Next</Button>
+        </div>
+      ) : null}
+      {openId ? (
+        <div className="space-y-6 rounded-md border p-4" key={openId}>
+          <CampaignMetrics campaignId={openId} />
+          <CampaignAssets campaignId={openId} />
+        </div>
+      ) : null}
+      <ConfirmSpendDialog
+        open={deleting !== null}
+        tier="destructive"
+        title={`Delete "${deleting?.name ?? "this campaign"}"`}
+        description="The campaign and its documents are removed. Sequences already launched from it keep running in the sequencer."
+        affected={1}
+        confirmLabel="Delete campaign"
+        confirming={remove.loading}
+        onConfirm={() => deleting && void remove.mutate(deleting)}
+        onCancel={() => setDeleting(null)}
+      />
+    </div>
+  );
+}

package/blocks/campaigns/components/campaign-metrics.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+/**
+ * CampaignMetrics: how a campaign is performing. A page with no required props: without `campaignId` it
+ * shows a campaign picker first.
+ *
+ * SDK operations, in order:
+ *   1. listCampaignsForPicker  GET /campaigns/picker        (read; only when no `campaignId`)
+ *   2. getCampaignMetrics      GET /campaigns/{campaign_id}/metrics?days  (read)
+ *
+ * Tiers: read only. The metrics payload is open-shaped, so the tiles show every numeric or text field and
+ * nested objects get their own small table. Numbers are shown as the API returns them.
+ */
+
+import { useState } from "react";
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { objectOf, scalars } from "../lib/campaigns-utils";
+import { CampaignSelect } from "./campaign-select";
+
+export interface CampaignMetricsProps {
+  campaignId?: string;
+  /** Window in days (1-365). Default 30. */
+  days?: number;
+  className?: string;
+}
+
+const WINDOWS = [7, 30, 90, 365];
+
+function Tiles({ data }: { data: Record<string, unknown> }) {
+  const tiles = scalars(data);
+  const groups = Object.entries(data).filter(([, v]) => v && typeof v === "object" && !Array.isArray(v)) as Array<[string, Record<string, unknown>]>;
+  return (
+    <div className="space-y-4">
+      {tiles.length > 0 ? (
+        <dl className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          {tiles.map(([k, v]) => (
+            <div key={k} className="rounded-md border p-3">
+              <dt className="text-xs capitalize text-muted-foreground">{k}</dt>
+              <dd className="text-xl font-semibold">{v}</dd>
+            </div>
+          ))}
+        </dl>
+      ) : null}
+      {groups.map(([name, group]) => (
+        <section key={name} aria-label={name.replace(/_/g, " ")}>
+          <h4 className="mb-1 text-sm font-medium capitalize">{name.replace(/_/g, " ")}</h4>
+          <Tiles data={group} />
+        </section>
+      ))}
+    </div>
+  );
+}
+
+function Metrics({ campaignId, days: initialDays, className }: { campaignId: string; days: number; className?: string }) {
+  const [days, setDays] = useState(initialDays);
+  const metrics = useG8Query((signal) => g8Get(`/campaigns/${campaignId}/metrics`, { days }, { signal }), [campaignId, days]);
+  const data = objectOf(metrics.data);
+  return (
+    <section aria-label="Campaign metrics" className={`space-y-3 ${className ?? ""}`}>
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium">Metrics</h3>
+        <div role="group" aria-label="Window" className="flex gap-1">
+          {WINDOWS.map((d) => (
+            <button key={d} type="button" aria-pressed={d === days} className={`rounded border px-2 py-0.5 text-xs ${d === days ? "bg-accent font-medium" : ""}`} onClick={() => setDays(d)}>
+              {d}d
+            </button>
+          ))}
+        </div>
+      </div>
+      {metrics.error ? <ApiError error={metrics.error} title="Could not load metrics" onRetry={() => void metrics.refetch()} /> : null}
+      {metrics.loading && !metrics.data ? <Skeleton className="h-24 w-full" /> : null}
+      {!metrics.loading && !metrics.error && Object.keys(data).length === 0 ? (
+        <EmptyState title="No metrics yet" description="Numbers appear once the campaign has launched and sent its first messages." />
+      ) : null}
+      {Object.keys(data).length > 0 ? <Tiles data={data} /> : null}
+    </section>
+  );
+}
+
+export function CampaignMetrics({ campaignId, days = 30, className }: CampaignMetricsProps) {
+  const [picked, setPicked] = useState<string | null>(null);
+  const id = campaignId ?? picked;
+  return (
+    <div className={`space-y-3 ${className ?? ""}`}>
+      {campaignId ? null : <CampaignSelect value={picked} onChange={setPicked} />}
+      {id ? <Metrics key={id} campaignId={id} days={days} /> : null}
+    </div>
+  );
+}

package/blocks/campaigns/components/campaign-select.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+/**
+ * CampaignSelect: pick one of the workspace's campaigns. Used by CampaignAssets and CampaignMetrics when they
+ * are rendered without a `campaignId`, so each works as a standalone page.
+ *
+ * SDK operations:
+ *   1. listCampaignsForPicker  GET /campaigns/picker  (read; free; every campaign, id and name only)
+ *
+ * Tiers: read only.
+ */
+
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get } from "@/g8/lib/g8-client";
+import { listOf } from "../lib/campaigns-utils";
+import type { CampaignRow } from "../lib/campaigns-utils";
+
+export interface CampaignSelectProps {
+  value?: string | null;
+  onChange: (campaignId: string | null) => void;
+  label?: string;
+  className?: string;
+}
+
+export function CampaignSelect({ value, onChange, label = "Campaign", className }: CampaignSelectProps) {
+  const picker = useG8Query((signal) => g8Get("/campaigns/picker", undefined, { signal }), []);
+  if (picker.error) return <ApiError error={picker.error} title="Could not load campaigns" onRetry={() => void picker.refetch()} />;
+  if (picker.loading && !picker.data) return <Skeleton className="h-9 w-64" />;
+  const rows = listOf<CampaignRow>(picker.data);
+  if (rows.length === 0) {
+    return <EmptyState title="No campaigns yet" description="Create one with the campaign wizard, then it appears here." />;
+  }
+  return (
+    <label className={`flex items-center gap-2 text-sm ${className ?? ""}`}>
+      <span className="font-medium">{label}</span>
+      <select
+        aria-label={label}
+        className="h-9 min-w-56 rounded-md border bg-background px-2"
+        value={value ?? ""}
+        onChange={(e) => onChange(e.target.value || null)}
+      >
+        <option value="">Choose a campaign</option>
+        {rows.map((c) => (
+          <option key={c.id} value={c.id}>{c.name ?? c.id}</option>
+        ))}
+      </select>
+    </label>
+  );
+}

package/blocks/campaigns/components/campaign-sequence-step.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+/**
+ * CampaignSequenceStep: the touches a campaign will make (email, phone, SMS, social) and their copy. Add a
+ * step, let AI write one step's content (billable, confirmed), edit a step's name and day, or remove it.
+ *
+ * SDK operations, in order:
+ *   1. getCampaignSequence          GET    /campaigns/{campaign_id}/sequence                          (read)
+ *   2. createCampaignStep           POST   /campaigns/{campaign_id}/sequence/steps                    (external, ConfirmSpendDialog)
+ *   3. generateCampaignStepContent  POST   /campaigns/{campaign_id}/sequence/steps/{step_id}/generate (billable, ConfirmSpendDialog; replaces the step's placeholder copy)
+ *   4. updateCampaignStep           PUT    /campaigns/{campaign_id}/sequence/steps/{step_id}          (external, ConfirmSpendDialog)
+ *   5. deleteCampaignStep           DELETE /campaigns/{campaign_id}/sequence/steps/{step_id}          (destructive, ConfirmSpendDialog)
+ *
+ * Tiers: every write here is `external` or stronger in the contract, so each is confirmed. Pick a mode from
+ * the channel -> mode matrix (email -> email; phone -> call|voicemail; sms -> sms; social -> connect_note|dm|
+ * comment|reply). The one-step API launch executes email only; build other channels in the sequencer block.
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } 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 { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { CHANNEL_MODES, CREDIT_ESTIMATES, stepsOf } from "../lib/campaigns-utils";
+import type { SequenceStep } from "../lib/campaigns-utils";
+import { FormField } from "./form-field";
+
+export interface CampaignSequenceStepProps {
+  campaignId: string;
+  /** Called with the step count after every change, so a wizard can gate "Launch". */
+  onStepsChange?: (count: number) => void;
+  className?: string;
+}
+
+type Action =
+  | { kind: "create"; body: { name: string; channel: string; mode: string; day: number } }
+  | { kind: "update"; step: SequenceStep; body: { name: string; day: number } }
+  | { kind: "generate"; step: SequenceStep }
+  | { kind: "delete"; step: SequenceStep };
+
+const label = (s: SequenceStep) => s.name || s.step_id;
+
+export function CampaignSequenceStep({ campaignId, onStepsChange, className }: CampaignSequenceStepProps) {
+  const sequence = useG8Query((signal) => g8Get(`/campaigns/${campaignId}/sequence`, undefined, { signal }), [campaignId]);
+  const [pending, setPending] = useState<Action | null>(null);
+  const [adding, setAdding] = useState(false);
+  const [editing, setEditing] = useState<SequenceStep | null>(null);
+  const [draft, setDraft] = useState({ name: "", channel: "email", mode: "email", day: "1" });
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const run = useG8Mutation(async (a: Action) => {
+    const base = `/campaigns/${campaignId}/sequence/steps`;
+    if (a.kind !== "create") setBusyId(a.step.step_id);
+    try {
+      if (a.kind === "create") return await g8Post(base, a.body);
+      if (a.kind === "update") return await g8Put(`${base}/${a.step.step_id}`, a.body);
+      if (a.kind === "generate") return await g8Post(`${base}/${a.step.step_id}/generate`, {});
+      return await g8Delete(`${base}/${a.step.step_id}`);
+    } catch (err) {
+      // A step that is already gone is the outcome a delete wanted.
+      if (a.kind === "delete" && (err as { status?: number }).status === 404) return undefined;
+      throw err;
+    } finally {
+      setBusyId(null);
+      setPending(null);
+    }
+  }, { onSuccess: () => void sequence.refetch() });
+
+  const steps = stepsOf(sequence.data);
+  const stepCount = sequence.data ? steps.length : null;
+  useEffect(() => { if (stepCount !== null) onStepsChange?.(stepCount); }, [stepCount, onStepsChange]);
+  const openEdit = (s: SequenceStep) => { setDraft({ name: s.name ?? "", channel: s.channel ?? "email", mode: s.mode ?? "email", day: String(s.day ?? 1) }); setEditing(s); };
+  const submitDialog = () => {
+    const day = Number(draft.day);
+    const body = { name: draft.name.trim(), day: Number.isFinite(day) && day >= 0 ? day : 1 };
+    if (editing) setPending({ kind: "update", step: editing, body });
+    else setPending({ kind: "create", body: { ...body, channel: draft.channel, mode: draft.mode } });
+    setEditing(null);
+    setAdding(false);
+  };
+  const title = (a: Action | null) =>
+    !a ? "" : a.kind === "create" ? `Add step "${a.body.name}"` : a.kind === "update" ? `Update step "${label(a.step)}"` : a.kind === "generate" ? `Write the copy for "${label(a.step)}" with AI` : `Remove step "${label(a.step)}"`;
+
+  return (
+    <section aria-label="Sequence" className={`space-y-3 ${className ?? ""}`}>
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium">Sequence steps</h3>
+        <Button size="sm" onClick={() => { setDraft({ name: "", channel: "email", mode: "email", day: "1" }); setAdding(true); }}>Add step</Button>
+      </div>
+      {sequence.error ? <ApiError error={sequence.error} title="Could not load the sequence" onRetry={() => void sequence.refetch()} /> : null}
+      {run.error ? <ApiError error={run.error} title="That change did not go through" /> : null}
+      <Table>
+        <TableHeader><TableRow><TableHead>Day</TableHead><TableHead>Step</TableHead><TableHead>Channel</TableHead><TableHead>Mode</TableHead><TableHead className="w-64" /></TableRow></TableHeader>
+        <TableBody>
+          {sequence.loading && !sequence.data ? <TableRow><TableCell colSpan={5}><Skeleton className="h-6 w-full" /></TableCell></TableRow> : null}
+          {steps.map((s) => (
+            <TableRow key={s.step_id}>
+              <TableCell>{s.day ?? ""}</TableCell>
+              <TableCell className="font-medium">{label(s)}</TableCell>
+              <TableCell>{s.channel}</TableCell>
+              <TableCell>{s.mode}</TableCell>
+              <TableCell className="space-x-2 text-right">
+                <Button size="sm" variant="outline" aria-label={`Write ${label(s)}`} loading={busyId === s.step_id} onClick={() => setPending({ kind: "generate", step: s })}>Write with AI</Button>
+                <Button size="sm" variant="outline" aria-label={`Edit ${label(s)}`} onClick={() => openEdit(s)}>Edit</Button>
+                <Button size="sm" variant="outline" aria-label={`Remove ${label(s)}`} onClick={() => setPending({ kind: "delete", step: s })}>Remove</Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      {!sequence.loading && !sequence.error && steps.length === 0 ? <EmptyState title="No steps yet" description="Add the first touch, for example a day-1 email." /> : null}
+
+      <Dialog open={adding || editing !== null} onOpenChange={(o) => { if (!o) { setAdding(false); setEditing(null); } }}>
+        <DialogContent>
+          <DialogHeader><DialogTitle>{editing ? "Edit step" : "Add step"}</DialogTitle></DialogHeader>
+          <div className="space-y-3">
+            <FormField label="Name" htmlFor="step-name"><Input id="step-name" value={draft.name} placeholder="Day 1 email" onChange={(e) => setDraft({ ...draft, name: e.target.value })} /></FormField>
+            <FormField label="Day" htmlFor="step-day"><Input id="step-day" type="number" min={0} value={draft.day} onChange={(e) => setDraft({ ...draft, day: e.target.value })} /></FormField>
+            {!editing ? (
+              <div className="grid grid-cols-2 gap-3">
+                <FormField label="Channel" htmlFor="step-channel">
+                  <select id="step-channel" className="h-9 rounded-md border bg-background px-2" value={draft.channel} onChange={(e) => setDraft({ ...draft, channel: e.target.value, mode: CHANNEL_MODES[e.target.value][0] })}>
+                    {Object.keys(CHANNEL_MODES).map((c) => <option key={c} value={c}>{c}</option>)}
+                  </select>
+                </FormField>
+                <FormField label="Mode" htmlFor="step-mode">
+                  <select id="step-mode" className="h-9 rounded-md border bg-background px-2" value={draft.mode} onChange={(e) => setDraft({ ...draft, mode: e.target.value })}>
+                    {(CHANNEL_MODES[draft.channel] ?? []).map((m) => <option key={m} value={m}>{m}</option>)}
+                  </select>
+                </FormField>
+              </div>
+            ) : null}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => { setAdding(false); setEditing(null); }}>Cancel</Button>
+            <Button disabled={!draft.name.trim()} onClick={submitDialog}>{editing ? "Review change" : "Review step"}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmSpendDialog
+        open={pending !== null}
+        tier={pending?.kind === "generate" ? "billable" : pending?.kind === "delete" ? "destructive" : "external"}
+        title={title(pending)}
+        description={pending?.kind === "generate" ? "Replaces the step's current copy. Estimate only." : "Nothing is sent to contacts until you launch the campaign."}
+        estimatedCredits={pending?.kind === "generate" ? CREDIT_ESTIMATES.stepContent : undefined}
+        affected={pending?.kind === "delete" ? 1 : undefined}
+        confirmLabel={pending?.kind === "generate" ? "Write step" : pending?.kind === "delete" ? "Remove step" : "Save step"}
+        confirming={run.loading}
+        onConfirm={() => pending && void run.mutate(pending)}
+        onCancel={() => setPending(null)}
+      />
+    </section>
+  );
+}