@graph8/sdk 0.308.1 → 0.357.0

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

@@ -0,0 +1,200 @@
+"use client";
+
+/**
+ * SequenceList: every sequence with its status, steps and contacts, and the controls to launch, pause,
+ * resume, duplicate and archive it.
+ *
+ * SDK operations, in order:
+ *   1. listSequences      GET  /sequences?status=&page=&limit=       (read)
+ *   2. previewSequence    GET  /sequences/{id}/preview               (read; checked before a launch: does the copy
+ *                         send as shown? `will_send_as_shown`, `content_issues`)
+ *   3. runSequence        POST /sequences/{id}/run                   (external: launches a draft; confirmed with the
+ *                         recipient count)
+ *      pauseSequence      POST /sequences/{id}/pause                 (external: confirmed)
+ *      resumeSequence     POST /sequences/{id}/resume                (external: confirmed)
+ *   4. duplicateSequence  POST /sequences/{id}/duplicate             (write; the copy starts as a draft)
+ *   5. archiveSequence    POST /sequences/{id}/archive               (destructive: confirmed)
+ *
+ * Launch, pause and resume change whether real people are emailed, called or messaged, so each opens
+ * ConfirmSpendDialog with the recipient count first. Ids: a row's `id` feeds every call after the list.
+ */
+
+import { useState } from "react";
+import { Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+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 { EmptyState } from "@/g8/components/empty-state";
+import { listOf, objectOf, STATUS_CLASS, statusGroup } from "../lib/sequencer-utils";
+import type { SequenceRow } from "../lib/sequencer-utils";
+
+export interface SequenceListProps {
+  /** Only this status ("drafted", "live", "paused"...). Default: all. */
+  status?: string;
+  pageSize?: number;
+  onOpen?: (sequence: SequenceRow) => void;
+  onCreate?: () => void;
+  className?: string;
+}
+
+type Action = "launch" | "pause" | "resume" | "archive";
+interface Pending {
+  action: Action;
+  sequence: SequenceRow;
+  warnings: string[];
+}
+
+const PATH: Record<Action, string> = { launch: "run", pause: "pause", resume: "resume", archive: "archive" };
+const COPY: Record<Action, { title: string; description: string; label: string }> = {
+  launch: { title: "Launch", description: "Contacts in the audience start receiving the steps in order.", label: "Launch sequence" },
+  pause: { title: "Pause", description: "Sending stops. Contacts keep their place.", label: "Pause sequence" },
+  resume: { title: "Resume", description: "Contacts continue from where they stopped.", label: "Resume sequence" },
+  archive: {
+    title: "Archive",
+    description: "The sequence is hidden and stops sending. The API cannot restore an archived sequence.",
+    label: "Archive sequence",
+  },
+};
+
+export function SequenceList({ status, pageSize = 25, onOpen, onCreate, className }: SequenceListProps) {
+  const [page, setPage] = useState(1);
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [preparing, setPreparing] = useState<string | null>(null);
+  const list = useG8Query((signal) => g8Get("/sequences", { page, limit: pageSize, status }, { signal }), [page, pageSize, status]);
+
+  const prepare = useG8Mutation(async (v: { action: Action; sequence: SequenceRow }) => {
+    let warnings: string[] = [];
+    setPreparing(v.sequence.id);
+    try {
+      if (v.action === "launch") {
+        const preview = objectOf(await g8Get(`/sequences/${v.sequence.id}/preview`));
+        const issues = Array.isArray(preview.content_issues) ? (preview.content_issues as Array<{ message?: string }>) : [];
+        warnings = preview.will_send_as_shown === false ? issues.map((i) => i.message ?? "Copy will not send as shown") : [];
+      }
+      setPending({ ...v, warnings });
+    } finally {
+      setPreparing(null);
+    }
+  });
+  const run = useG8Mutation(async (p: Pending) => {
+    await g8Post(`/sequences/${p.sequence.id}/${PATH[p.action]}`, p.action === "archive" ? {} : undefined);
+    await list.refetch();
+  });
+  const duplicate = useG8Mutation(async (s: SequenceRow) => {
+    await g8Post(`/sequences/${s.id}/duplicate`, {});
+    await list.refetch();
+  });
+
+  const rows = listOf<SequenceRow>(list.data);
+  if (list.error) return <ApiError error={list.error} onRetry={() => void list.refetch()} className={className} />;
+  if (list.loading && !list.data) return <Skeleton className={`h-40 w-full ${className ?? ""}`} />;
+  if (rows.length === 0 && page === 1)
+    return (
+      <EmptyState
+        className={className}
+        title="No sequences yet"
+        description="A sequence is a series of emails, LinkedIn touches and calls sent to a list over time."
+        action={onCreate ? <Button onClick={onCreate}>Create a sequence</Button> : undefined}
+      />
+    );
+
+  return (
+    <div className={`space-y-3 ${className ?? ""}`}>
+      {[prepare.error, run.error, duplicate.error].filter(Boolean).map((e, i) => (
+        <ApiError key={i} error={e} />
+      ))}
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Sequence</TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Steps</TableHead>
+            <TableHead>Contacts</TableHead>
+            <TableHead />
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {rows.map((s) => {
+            const group = statusGroup(s.status);
+            const act = (action: Action) => void prepare.mutate({ action, sequence: s });
+            return (
+              <TableRow key={s.id}>
+                <TableCell>
+                  <button type="button" className="font-medium hover:underline" onClick={() => onOpen?.(s)}>
+                    {s.name ?? s.id}
+                  </button>
+                </TableCell>
+                <TableCell>
+                  <span className={`rounded px-2 py-0.5 text-xs ${STATUS_CLASS[group]}`}>{s.status ?? "drafted"}</span>
+                </TableCell>
+                <TableCell>{s.step_count ?? 0}</TableCell>
+                <TableCell>{s.contact_count ?? 0}</TableCell>
+                <TableCell className="space-x-1 text-right">
+                  {group === "draft" ? (
+                    <Button size="sm" onClick={() => act("launch")} disabled={preparing === s.id}>
+                      Launch
+                    </Button>
+                  ) : null}
+                  {group === "live" ? (
+                    <Button size="sm" variant="outline" onClick={() => act("pause")}>
+                      Pause
+                    </Button>
+                  ) : null}
+                  {group === "paused" ? (
+                    <Button size="sm" variant="outline" onClick={() => act("resume")}>
+                      Resume
+                    </Button>
+                  ) : null}
+                  <Button size="sm" variant="ghost" aria-label={`Duplicate ${s.name}`} onClick={() => void duplicate.mutate(s)}>
+                    Duplicate
+                  </Button>
+                  {group !== "ended" ? (
+                    <Button size="sm" variant="ghost" aria-label={`Archive ${s.name}`} onClick={() => act("archive")}>
+                      Archive
+                    </Button>
+                  ) : null}
+                </TableCell>
+              </TableRow>
+            );
+          })}
+        </TableBody>
+      </Table>
+      <div className="flex justify-end gap-2">
+        <Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+          Previous
+        </Button>
+        <Button size="sm" variant="outline" disabled={rows.length < pageSize} onClick={() => setPage((p) => p + 1)}>
+          Next
+        </Button>
+      </div>
+
+      {pending ? (
+        <ConfirmSpendDialog
+          open
+          tier={pending.action === "archive" ? "destructive" : "external"}
+          title={`${COPY[pending.action].title} "${pending.sequence.name ?? pending.sequence.id}"`}
+          description={
+            <>
+              <p>{COPY[pending.action].description}</p>
+              {pending.warnings.length > 0 ? (
+                <ul className="mt-2 list-disc pl-5 text-amber-800">
+                  {pending.warnings.map((w) => (
+                    <li key={w}>{w}</li>
+                  ))}
+                </ul>
+              ) : null}
+            </>
+          }
+          recipients={pending.action === "archive" ? undefined : (pending.sequence.contact_count ?? undefined)}
+          affected={pending.action === "archive" ? 1 : undefined}
+          confirmLabel={COPY[pending.action].label}
+          confirming={run.loading}
+          onCancel={() => setPending(null)}
+          onConfirm={() => void run.mutate(pending).then(() => setPending(null))}
+        />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,256 @@
+"use client";
+
+/**
+ * SequenceStats: how a sequence is performing. Totals, per-step progress, why contacts were skipped, and the
+ * contacts with their state, each with a pause control.
+ *
+ * SDK operations, in order:
+ *   1. getSequenceStats        GET  /sequences/{id}/stats                       (read; total_contacts, step_stats, skip reasons)
+ *   2. getSequenceAnalytics    GET  /sequences/{id}/analytics                   (read; overview, engagement)
+ *   3. listSequenceContacts    GET  /sequences/{id}/contacts?state=&page=       (read)
+ *   4. pauseSequenceContact    POST /sequences/{id}/contacts/{contact_id}/pause (write: only that contact stops)
+ *   5. resumeSequenceContact   POST /sequences/{id}/contacts/{contact_id}/resume (external: confirmed)
+ *
+ * No stream exists: the numbers refresh on demand, or every `refreshSeconds`. `skip_reason_breakdown` is
+ * counted once per contact, so it can total LESS than the per-step skipped tiles: do not add them up.
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+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 { listOf, objectOf } from "../lib/sequencer-utils";
+
+export interface SequenceStatsProps {
+  sequenceId: string;
+  pageSize?: number;
+  /** Reload every N seconds (0 or undefined: on demand). */
+  refreshSeconds?: number;
+  className?: string;
+}
+
+interface StepStat {
+  step_id?: string;
+  step_order: number;
+  step_type?: string;
+  total_contacts?: number;
+  counts?: Record<string, number>;
+}
+interface ContactRow {
+  id?: string;
+  contact_id?: number;
+  state?: string;
+  current_step_order?: number | null;
+}
+
+const STATES = ["", "waiting", "paused", "completed", "replied", "bounced", "skipped"];
+
+function Tile({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="rounded border border-gray-200 p-3">
+      <div className="text-xs capitalize text-gray-500">{label}</div>
+      <div className="text-xl font-semibold">{value}</div>
+    </div>
+  );
+}
+
+export function SequenceStats({ sequenceId, pageSize = 25, refreshSeconds, className }: SequenceStatsProps) {
+  const [state, setState] = useState("");
+  const [page, setPage] = useState(1);
+  const [resume, setResume] = useState<ContactRow | null>(null);
+  useEffect(() => {
+    // A different sequence: forget the previous one's filter, page and pending resume.
+    setState("");
+    setPage(1);
+    setResume(null);
+  }, [sequenceId]);
+  const stats = useG8Query((signal) => g8Get(`/sequences/${sequenceId}/stats`, undefined, { signal }), [sequenceId]);
+  const analytics = useG8Query((signal) => g8Get(`/sequences/${sequenceId}/analytics`, undefined, { signal }), [sequenceId]);
+  const contacts = useG8Query(
+    (signal) => g8Get(`/sequences/${sequenceId}/contacts`, { page, limit: pageSize, state: state || undefined }, { signal }),
+    [sequenceId, page, pageSize, state],
+  );
+
+  useEffect(() => {
+    if (!refreshSeconds) return;
+    const timer = setInterval(() => {
+      void stats.refetch();
+      void contacts.refetch();
+      void analytics.refetch();
+    }, refreshSeconds * 1000);
+    return () => clearInterval(timer);
+  }, [refreshSeconds, stats.refetch, contacts.refetch, analytics.refetch]);
+
+  const pause = useG8Mutation(async (c: ContactRow) => {
+    await g8Post(`/sequences/${sequenceId}/contacts/${c.contact_id}/pause`);
+    await contacts.refetch();
+  });
+  const resumeRun = useG8Mutation(async (c: ContactRow) => {
+    await g8Post(`/sequences/${sequenceId}/contacts/${c.contact_id}/resume`);
+    await contacts.refetch();
+  });
+
+  if (stats.error) return <ApiError error={stats.error} onRetry={() => void stats.refetch()} className={className} />;
+  if (stats.loading && !stats.data) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
+
+  const s = objectOf(stats.data) as { total_contacts?: number; step_stats?: StepStat[]; skip_reason_breakdown?: Record<string, number> };
+  const overview = objectOf({ data: objectOf(analytics.data).overview });
+  const steps = s.step_stats ?? [];
+  const skips = Object.entries(s.skip_reason_breakdown ?? {});
+  const rows = listOf<ContactRow>(contacts.data);
+  const overviewTiles = Object.entries(overview)
+    .filter(([, v]) => typeof v === "number" || typeof v === "string")
+    .slice(0, 4);
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium">Performance</h3>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => {
+            void stats.refetch();
+            void analytics.refetch();
+            void contacts.refetch();
+          }}
+        >
+          Refresh
+        </Button>
+      </div>
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
+        <Tile label="contacts" value={(s.total_contacts ?? 0).toLocaleString()} />
+        {overviewTiles.map(([k, v]) => (
+          <Tile key={k} label={k.replace(/_/g, " ")} value={typeof v === "number" ? v.toLocaleString() : String(v)} />
+        ))}
+      </div>
+
+      {steps.length > 0 ? (
+        <Table aria-label="Step progress">
+          <TableHeader>
+            <TableRow>
+              <TableHead>Step</TableHead>
+              <TableHead>Type</TableHead>
+              <TableHead>Contacts</TableHead>
+              <TableHead>By state</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {steps.map((st) => (
+              <TableRow key={st.step_id ?? st.step_order}>
+                <TableCell>{st.step_order}</TableCell>
+                <TableCell>{st.step_type}</TableCell>
+                <TableCell>{st.total_contacts ?? 0}</TableCell>
+                <TableCell className="text-xs text-gray-600">
+                  {Object.entries(st.counts ?? {})
+                    .filter(([, n]) => n > 0)
+                    .map(([k, n]) => `${k}: ${n}`)
+                    .join(", ") || "-"}
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      ) : (
+        <p className="text-sm text-gray-500">No step activity yet.</p>
+      )}
+
+      {skips.length > 0 ? (
+        <p className="text-sm text-gray-600" data-testid="skip-reasons">
+          Skipped contacts, counted once each: {skips.map(([k, n]) => `${k.replace(/^skipped_/, "").replace(/_/g, " ")} ${n}`).join(", ")}
+        </p>
+      ) : null}
+
+      <div className="space-y-2">
+        <div className="flex items-center gap-2 text-sm">
+          <label>
+            Contacts in
+            <select
+              aria-label="Contact state"
+              className="ml-2 h-8 rounded border border-gray-300 px-1"
+              value={state}
+              onChange={(e) => {
+                setState(e.target.value);
+                setPage(1);
+              }}
+            >
+              {STATES.map((st) => (
+                <option key={st} value={st}>
+                  {st || "any state"}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+        {contacts.error ? (
+          <ApiError error={contacts.error} onRetry={() => void contacts.refetch()} />
+        ) : (
+          <Table aria-label="Sequence contacts">
+            <TableHeader>
+              <TableRow>
+                <TableHead>Contact</TableHead>
+                <TableHead>State</TableHead>
+                <TableHead>Step</TableHead>
+                <TableHead />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-sm text-gray-500">
+                    {contacts.loading ? "Loading..." : "No contacts in this state."}
+                  </TableCell>
+                </TableRow>
+              ) : (
+                rows.map((c) => (
+                  <TableRow key={c.id ?? c.contact_id}>
+                    <TableCell>#{c.contact_id}</TableCell>
+                    <TableCell>{c.state}</TableCell>
+                    <TableCell>{c.current_step_order ?? "-"}</TableCell>
+                    <TableCell className="text-right">
+                      {c.state === "paused" ? (
+                        <Button size="sm" variant="outline" onClick={() => setResume(c)}>
+                          Resume
+                        </Button>
+                      ) : (
+                        <Button size="sm" variant="ghost" aria-label={`Pause contact ${c.contact_id}`} onClick={() => void pause.mutate(c)}>
+                          Pause
+                        </Button>
+                      )}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        )}
+        {pause.error ? <ApiError error={pause.error} /> : null}
+        <div className="flex justify-end gap-2">
+          <Button size="sm" variant="outline" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
+            Previous
+          </Button>
+          <Button size="sm" variant="outline" disabled={rows.length < pageSize} onClick={() => setPage((p) => p + 1)}>
+            Next
+          </Button>
+        </div>
+      </div>
+
+      {resume ? (
+        <ConfirmSpendDialog
+          open
+          tier="external"
+          title={`Resume contact #${resume.contact_id}`}
+          description="Their next step can send."
+          recipients={1}
+          confirmLabel="Resume contact"
+          confirming={resumeRun.loading}
+          onCancel={() => setResume(null)}
+          onConfirm={() => void resumeRun.mutate(resume).then(() => setResume(null))}
+        />
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,213 @@
+"use client";
+
+/**
+ * StepEditor: edit ONE sequence step: an email, a LinkedIn action, a call, or a manual call task. It is a
+ * controlled form (value in, `onChange` out) and sends nothing by itself; SequenceBuilder saves the steps.
+ *
+ * SDK operations, in order:
+ *   1. getOutreachConnection  GET /integrations/linkedin-outreach/connection  (read; LinkedIn steps only: is a
+ *                             LinkedIn sender connected and its session valid?)
+ *
+ * Tiers: read only; no confirmation. It encodes the rules the API only enforces at SEND time:
+ *   - an EMAIL step must be `MANUAL_TEMPLATE` for your own subject/body to be sent (ON_DEMAND ignores them);
+ *   - a LinkedIn step needs `linkedin_action_type` and the action's own copy key (never `body`);
+ *   - `{{merge_tokens}}` must be balanced or the sender deletes them.
+ * Problems show inline and `stepIssues(step)` returns the same list for gating a Save button.
+ */
+
+import { Input, Textarea } from "@graph8/sdk/ui";
+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";
+
+export interface StepEditorProps {
+  step: DraftStep;
+  /** 1-based position, shown in the header. */
+  index: number;
+  onChange: (next: DraftStep) => void;
+  onRemove?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+const COPY_KEY: Record<string, string | undefined> = {
+  CONNECTION_REQUEST: "linkedin_connection_message",
+  MESSAGE: "linkedin_message_text",
+  INMAIL: "linkedin_inmail_body",
+};
+
+function LinkedinReadiness() {
+  const conn = useG8Query(
+    (signal) =>
+      g8Get<{ connected?: boolean; is_token_valid?: boolean; requires_manual_login?: boolean }>(
+        "/integrations/linkedin-outreach/connection",
+        undefined,
+        { signal },
+      ),
+    [],
+  );
+  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 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>
+  );
+}
+
+export function StepEditor({ step, index, onChange, onRemove, disabled, className }: StepEditorProps) {
+  const set = (patch: Record<string, unknown>) => onChange({ ...step, dirty: true, step_data: { ...step.step_data, ...patch } });
+  const issues = stepIssues(step);
+  const data = step.step_data;
+  const str = (k: string) => (typeof data[k] === "string" ? (data[k] as string) : "");
+  const action = str("linkedin_action_type");
+  const copyKey = COPY_KEY[action];
+  const copy = step.kind === "email" ? str("body") : copyKey ? str(copyKey) : "";
+  const broken = hasBrokenTokens(copy) || hasBrokenTokens(str("subject"));
+  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}>
+      <div className="flex items-center justify-between">
+        <legend className="text-sm font-semibold">
+          Step {index}: {KIND_LABEL[step.kind]}
+        </legend>
+        {onRemove ? (
+          <button type="button" className="text-xs text-red-700 hover:underline" onClick={onRemove}>
+            Remove step
+          </button>
+        ) : null}
+      </div>
+
+      <label className="flex items-center gap-2 text-sm">
+        {index === 1 ? "Starts" : "Wait"}
+        <Input
+          aria-label="Wait in days"
+          className="w-20"
+          type="number"
+          min={0}
+          step="any"
+          value={step.wait_days}
+          disabled={index === 1}
+          onChange={(e) => onChange({ ...step, dirty: true, wait_days: Math.max(0, Number(e.target.value) || 0) })}
+        />
+        {index === 1 ? "as soon as a contact is enrolled" : "days after the previous step"}
+      </label>
+
+      {step.kind === "email" ? (
+        <>
+          <label className="block text-sm">
+            Copy
+            <select
+              aria-label="Email copy"
+              className="ml-2 h-8 rounded border border-gray-300 px-1 text-sm"
+              value={step.input_type}
+              onChange={(e) => onChange({ ...step, dirty: true, input_type: e.target.value as InputType })}
+            >
+              <option value="MANUAL_TEMPLATE">I write it</option>
+              <option value="AI_GENERATED_TEMPLATE">AI drafts a template</option>
+              <option value="ON_DEMAND">AI writes each email</option>
+            </select>
+          </label>
+          {step.input_type === "MANUAL_TEMPLATE" ? (
+            <>
+              <Input aria-label="Subject" placeholder="Subject" value={str("subject")} onChange={(e) => set({ subject: e.target.value })} />
+              <Textarea
+                aria-label="Body"
+                rows={6}
+                placeholder="Hi {{first_name}}, ..."
+                value={str("body")}
+                onChange={(e) => set({ body: e.target.value })}
+              />
+            </>
+          ) : (
+            <Textarea
+              aria-label="Instructions for the AI"
+              rows={4}
+              placeholder="What should this email say, and to whom?"
+              value={str("instructions")}
+              onChange={(e) => set({ instructions: e.target.value })}
+            />
+          )}
+        </>
+      ) : null}
+
+      {step.kind === "linkedin" ? (
+        <>
+          <select
+            aria-label="LinkedIn action"
+            className="h-8 rounded border border-gray-300 px-1 text-sm"
+            value={action}
+            onChange={(e) => set({ linkedin_action_type: e.target.value })}
+          >
+            {LINKEDIN_ACTIONS.map((a) => (
+              <option key={a} value={a}>
+                {a.replace(/_/g, " ").toLowerCase()}
+              </option>
+            ))}
+          </select>
+          {copyKey ? (
+            <Textarea
+              aria-label="LinkedIn message"
+              rows={4}
+              placeholder="Hi {{first_name}}, ..."
+              value={copy}
+              onChange={(e) => set({ [copyKey]: e.target.value })}
+            />
+          ) : (
+            <p className="text-xs text-gray-500">This action sends no text.</p>
+          )}
+          {action === "INMAIL" ? (
+            <Input
+              aria-label="InMail subject"
+              placeholder="InMail subject"
+              value={str("linkedin_inmail_subject")}
+              onChange={(e) => set({ linkedin_inmail_subject: e.target.value })}
+            />
+          ) : null}
+          <LinkedinReadiness />
+        </>
+      ) : null}
+
+      {step.kind === "call" || step.kind === "task" ? (
+        <div className="space-y-1 text-sm">
+          <p className="text-gray-600">
+            {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">
+            {["mobile", "direct"].map((p) => (
+              <label key={p} className="flex items-center gap-1">
+                <input
+                  type="checkbox"
+                  checked={phoneOptions.includes(p)}
+                  onChange={(e) => set({ phone_options: e.target.checked ? [...phoneOptions, p] : phoneOptions.filter((x) => x !== p) })}
+                />
+                {p} numbers
+              </label>
+            ))}
+            <label className="flex items-center gap-1">
+              <input type="checkbox" checked={data.dial_dnc === true} onChange={(e) => set({ dial_dnc: e.target.checked })} />
+              Dial do-not-call numbers
+            </label>
+          </div>
+        </div>
+      ) : null}
+
+      {broken ? (
+        <p role="alert" className="text-xs text-amber-800">
+          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">
+          {issues.map((i) => (
+            <li key={i}>{i}</li>
+          ))}
+        </ul>
+      ) : null}
+    </fieldset>
+  );
+}