@graph8/sdk 0.308.1 → 0.357.0

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

@@ -0,0 +1,238 @@
+"use client";
+
+/**
+ * CampaignWizard: from an idea to a launched campaign in five steps: Idea -> Campaign -> Audience ->
+ * Sequence -> Launch. A page with no required props; pass `initialCampaignId` to resume a draft.
+ *
+ * SDK operations, in order (steps 3-5 are CampaignAudienceStep, CampaignSequenceStep, CampaignLaunchStep):
+ *   1. getCompanyProfile / listPersonas  GET /company-profile, /personas       (read; website and persona choices)
+ *   2. generateCampaignIdeasAsync        POST /campaigns/generate-ideas-async  (billable, ConfirmSpendDialog; returns task_id)
+ *      getCampaignIdeasTaskStatus        GET  /campaigns/ideas/status/{task_id} (read; POLLED, there are no streams)
+ *   3. createCampaign                    POST /campaigns                       (external, ConfirmSpendDialog; billable when documents are generated)
+ *      updateCampaign                    PATCH /campaigns/{campaign_id}        (external, ConfirmSpendDialog; once the campaign exists)
+ *      getCampaignGenerationStatus       GET  /campaigns/{campaign_id}/status  (read; POLLED while documents generate)
+ *   4. attach audience, steps/content, launch: see the three step components.
+ *
+ * Retry safety: the campaign id is stored the moment create succeeds, so a failure in a later step never
+ * creates a second campaign; "Create" turns into "Save changes". "Start over" clears every field, the idea
+ * results and the campaign id (the campaign already created stays in graph8; delete it in CampaignList).
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Input, Textarea } 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 { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import type { ListSummary } from "@/g8/lists/components/list-picker";
+import { useCompanyProfile } from "../hooks/use-company-profile";
+import { CREDIT_ESTIMATES, listOf, objectOf, settled, statusClass, text } from "../lib/campaigns-utils";
+import { CampaignAudienceStep } from "./campaign-audience-step";
+import { CampaignLaunchStep } from "./campaign-launch-step";
+import { CampaignSequenceStep } from "./campaign-sequence-step";
+import { FormField } from "./form-field";
+
+export interface CampaignWizardProps {
+  /** Resume a draft campaign at the Audience step. */
+  initialCampaignId?: string;
+  /** Overrides the website from the saved profile. */
+  websiteUrl?: string;
+  onLaunched?: (result: Record<string, unknown>) => void;
+  className?: string;
+}
+
+const STEPS = ["Idea", "Campaign", "Audience", "Sequence", "Launch"] as const;
+const GOALS = ["awareness", "consideration", "decision"];
+const CHANNELS = ["email", "linkedin", "phone"];
+
+interface Draft { name: string; category: string; goal: string; brief: string; core_concept: string; primary_hook: string; target_persona: string; channels: string[]; autoGenerate: boolean }
+const emptyDraft: Draft = { name: "", category: "Outbound", goal: "", brief: "", core_concept: "", primary_hook: "", target_persona: "", channels: ["email"], autoGenerate: false };
+
+interface Idea { id?: string; campaign_name?: string; campaign_category?: string; core_concept?: string; why_this_works?: string; primary_hook?: string; target_channels?: string[] }
+
+function IdeaStep({ websiteUrl, onPick, onSkip }: { websiteUrl: string; onPick: (i: Idea) => void; onSkip: () => void }) {
+  const personas = useG8Query((signal) => g8Get("/personas", { limit: 50 }, { signal }), []);
+  const [goal, setGoal] = useState(GOALS[0]);
+  const [count, setCount] = useState(5);
+  const [direction, setDirection] = useState("");
+  const [selected, setSelected] = useState<string[]>([]);
+  const [confirm, setConfirm] = useState(false);
+  const [taskId, setTaskId] = useState<string | null>(null);
+  const start = useG8Mutation(
+    () => g8Post("/campaigns/generate-ideas-async", {
+      organization_id: "current", website_url: websiteUrl, campaign_goal: goal, num_ideas: count, user_direction: direction || null,
+      target_personas: selected, persona_mode: selected.length ? "selected" : "auto",
+    }),
+    { onSuccess: (res) => { setConfirm(false); setTaskId(text(objectOf(res).task_id) || null); }, onError: () => setConfirm(false) },
+  );
+  const poll = useJobPoll(
+    async (signal) => objectOf(await g8Get(`/campaigns/ideas/status/${taskId}`, undefined, { signal })),
+    { enabled: false, isTerminal: (s) => ["completed", "failed"].includes(text(s.status)), maxAttempts: 90 },
+  );
+  useEffect(() => { if (taskId) poll.start(); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [taskId]);
+  const ideas = (poll.status?.ideas as Idea[] | undefined) ?? [];
+  const failed = poll.status?.status === "failed";
+  const personaRows = listOf<{ id: string; title?: string }>(personas.data);
+
+  return (
+    <section aria-label="Ideas" className="space-y-3">
+      <p className="text-sm text-muted-foreground">Let AI propose campaign ideas for {websiteUrl || "your company"}, or skip and write your own.</p>
+      <div className="grid gap-3 sm:grid-cols-3">
+        <FormField label="Goal" htmlFor="idea-goal">
+          <select id="idea-goal" className="h-9 rounded-md border bg-background px-2" value={goal} onChange={(e) => setGoal(e.target.value)}>{GOALS.map((g) => <option key={g}>{g}</option>)}</select>
+        </FormField>
+        <FormField label="How many ideas" htmlFor="idea-count"><Input id="idea-count" type="number" min={1} max={10} value={count} onChange={(e) => setCount(Math.min(10, Math.max(1, Number(e.target.value) || 1)))} /></FormField>
+        <FormField label="Direction (optional)" htmlFor="idea-direction"><Input id="idea-direction" value={direction} onChange={(e) => setDirection(e.target.value)} /></FormField>
+      </div>
+      {personaRows.length > 0 ? (
+        <fieldset className="flex flex-wrap gap-3"><legend className="text-sm font-medium">Target personas</legend>
+          {personaRows.map((p) => (
+            <label key={p.id} className="flex items-center gap-1 text-sm">
+              <input type="checkbox" checked={selected.includes(p.title ?? "")} onChange={(e) => setSelected(e.target.checked ? [...selected, p.title ?? ""] : selected.filter((t) => t !== p.title))} />{p.title}
+            </label>
+          ))}
+        </fieldset>
+      ) : null}
+      {[start.error, poll.error].map((e, i) => (e ? <ApiError key={i} error={e} title="Idea generation failed" /> : null))}
+      <div className="flex gap-2">
+        <Button disabled={!websiteUrl || poll.polling} loading={start.loading} onClick={() => setConfirm(true)}>Generate ideas</Button>
+        <Button variant="outline" onClick={onSkip}>Skip, write my own</Button>
+      </div>
+      {!websiteUrl ? <p className="text-sm text-amber-800">Save the company website in IcpEditor first; ideas are generated from it.</p> : null}
+      {poll.polling ? <p role="status" className="text-sm text-muted-foreground">Generating ideas. This takes 10 to 20 seconds.</p> : null}
+      {!poll.polling && !poll.done && poll.attempts > 0 && !poll.error ? <p role="status" className="text-sm text-amber-800">Still running. Check back in a minute and generate again if nothing appears.</p> : null}
+      {failed ? <p role="alert" className="text-sm text-red-700">Generation failed: {text(poll.status?.error) || "try again"}.</p> : null}
+      {poll.done && !failed && ideas.length === 0 ? <p className="text-sm text-muted-foreground">No ideas came back. Try a different goal or direction.</p> : null}
+      <ul className="space-y-2">
+        {ideas.map((idea, i) => (
+          <li key={idea.id ?? i} className="rounded-md border p-3">
+            <p className="font-medium">{idea.campaign_name}</p>
+            <p className="text-sm text-muted-foreground">{idea.core_concept}</p>
+            {idea.primary_hook ? <p className="text-sm">Hook: {idea.primary_hook}</p> : null}
+            <Button size="sm" className="mt-2" aria-label={`Use idea ${idea.campaign_name}`} onClick={() => onPick(idea)}>Use this idea</Button>
+          </li>
+        ))}
+      </ul>
+      <ConfirmSpendDialog
+        open={confirm}
+        tier="billable"
+        title={`Generate ${count} campaign ideas`}
+        description="AI writes the ideas from your company profile. Estimate only."
+        estimatedCredits={count * CREDIT_ESTIMATES.perIdea}
+        confirmLabel="Generate ideas"
+        confirming={start.loading}
+        onConfirm={() => void start.mutate(undefined)}
+        onCancel={() => setConfirm(false)}
+      />
+    </section>
+  );
+}
+
+function GenerationStatus({ campaignId }: { campaignId: string }) {
+  const poll = useJobPoll(async (signal) => objectOf(await g8Get(`/campaigns/${campaignId}/status`, undefined, { signal })), { isTerminal: settled, maxAttempts: 90 });
+  const label = poll.polling ? "generating documents" : text(poll.status?.status) || "ready";
+  return <span role="status" className={`rounded px-2 py-0.5 text-xs ${statusClass(poll.polling ? "generating" : "completed")}`}>Documents: {label}</span>;
+}
+
+export function CampaignWizard({ initialCampaignId, websiteUrl, onLaunched, className }: CampaignWizardProps) {
+  const profile = useCompanyProfile(websiteUrl);
+  const [step, setStep] = useState(initialCampaignId ? 2 : 0);
+  const [draft, setDraft] = useState<Draft>(emptyDraft);
+  const [campaignId, setCampaignId] = useState<string | null>(initialCampaignId ?? null);
+  const [audience, setAudience] = useState<ListSummary | null>(null);
+  const [confirm, setConfirm] = useState(false);
+  const [resetKey, setResetKey] = useState(0);
+
+  const save = useG8Mutation(async () => {
+    const fields = { name: draft.name.trim(), category: draft.category, goal: draft.goal || null, brief: draft.brief || null, core_concept: draft.core_concept || null, primary_hook: draft.primary_hook || null, target_persona: draft.target_persona || null };
+    if (campaignId) return g8Patch(`/campaigns/${campaignId}`, fields);
+    return g8Post("/campaigns", { ...fields, target_channels: draft.channels, auto_generate_documents: draft.autoGenerate });
+  }, {
+    onSuccess: (res) => {
+      setConfirm(false);
+      const id = text(objectOf(res).id);
+      if (!campaignId && id) setCampaignId(id); // stored at once: a later failure never re-creates the campaign
+      setStep(2);
+    },
+    onError: () => setConfirm(false),
+  });
+
+  const set = (k: keyof Draft) => (e: { target: { value: string } }) => setDraft({ ...draft, [k]: e.target.value });
+  const pickIdea = (i: Idea) => {
+    setDraft({ ...draft, name: i.campaign_name ?? "", category: i.campaign_category ?? draft.category, core_concept: i.core_concept ?? "", primary_hook: i.primary_hook ?? "", brief: i.why_this_works ?? "", channels: i.target_channels?.length ? i.target_channels : draft.channels });
+    setStep(1);
+  };
+  const reset = () => { setStep(0); setDraft(emptyDraft); setCampaignId(null); setAudience(null); setConfirm(false); save.reset(); setResetKey((k) => k + 1); };
+  const autoGen = !campaignId && draft.autoGenerate;
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <nav aria-label="Wizard steps" className="flex flex-wrap items-center gap-2">
+        {STEPS.map((label, i) => (
+          <button key={label} type="button" aria-current={i === step ? "step" : undefined} disabled={i > 1 && !campaignId}
+            className={`rounded-full border px-3 py-1 text-sm ${i === step ? "bg-accent font-medium" : ""}`} onClick={() => setStep(i)}>
+            {i + 1}. {label}
+          </button>
+        ))}
+        {campaignId ? <GenerationStatus key={campaignId} campaignId={campaignId} /> : null}
+        <Button size="sm" variant="outline" className="ml-auto" onClick={reset}>Start over</Button>
+      </nav>
+
+      {step === 0 ? <IdeaStep key={resetKey} websiteUrl={profile.websiteUrl} onPick={pickIdea} onSkip={() => setStep(1)} /> : null}
+      {step === 1 ? (
+        <section aria-label="Campaign" className="space-y-3">
+          <FormField label="Campaign name" htmlFor="cw-name"><Input id="cw-name" value={draft.name} onChange={set("name")} /></FormField>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <FormField label="Category" htmlFor="cw-category"><Input id="cw-category" value={draft.category} onChange={set("category")} /></FormField>
+            <FormField label="Goal" htmlFor="cw-goal"><Input id="cw-goal" value={draft.goal} onChange={set("goal")} /></FormField>
+          </div>
+          <FormField label="Target persona" htmlFor="cw-persona"><Input id="cw-persona" value={draft.target_persona} onChange={set("target_persona")} /></FormField>
+          <FormField label="Core concept" htmlFor="cw-concept"><Textarea id="cw-concept" value={draft.core_concept} onChange={set("core_concept")} /></FormField>
+          <FormField label="Primary hook" htmlFor="cw-hook"><Input id="cw-hook" value={draft.primary_hook} onChange={set("primary_hook")} /></FormField>
+          <FormField label="Brief" htmlFor="cw-brief"><Textarea id="cw-brief" value={draft.brief} onChange={set("brief")} /></FormField>
+          {!campaignId ? (
+            <>
+              <fieldset className="flex gap-3"><legend className="text-sm font-medium">Channels</legend>
+                {CHANNELS.map((c) => (
+                  <label key={c} className="flex items-center gap-1 text-sm">
+                    <input type="checkbox" checked={draft.channels.includes(c)} onChange={(e) => setDraft({ ...draft, channels: e.target.checked ? [...draft.channels, c] : draft.channels.filter((x) => x !== c) })} />{c}
+                  </label>
+                ))}
+              </fieldset>
+              <label className="flex items-center gap-2 text-sm">
+                <input type="checkbox" checked={draft.autoGenerate} onChange={(e) => setDraft({ ...draft, autoGenerate: e.target.checked })} />
+                Write the campaign documents with AI after creating it (uses credits)
+              </label>
+            </>
+          ) : null}
+          {save.error ? <ApiError error={save.error} title={campaignId ? "Could not save the campaign" : "Could not create the campaign"} /> : null}
+          <Button disabled={!draft.name.trim()} loading={save.loading} onClick={() => setConfirm(true)}>{campaignId ? "Save changes" : "Create campaign"}</Button>
+        </section>
+      ) : null}
+      {step === 2 && campaignId ? <CampaignAudienceStep campaignId={campaignId} onAttached={setAudience} /> : null}
+      {step === 3 && campaignId ? <CampaignSequenceStep campaignId={campaignId} /> : null}
+      {step === 4 && campaignId ? <CampaignLaunchStep campaignId={campaignId} audienceSize={audience?.total ?? audience?.contact_count ?? undefined} onLaunched={onLaunched} /> : null}
+      {step >= 2 && campaignId ? (
+        <div className="flex justify-between">
+          <Button variant="outline" onClick={() => setStep(step - 1)}>Back</Button>
+          {step < 4 ? <Button onClick={() => setStep(step + 1)}>Next</Button> : null}
+        </div>
+      ) : null}
+
+      <ConfirmSpendDialog
+        open={confirm}
+        tier={autoGen ? "billable" : "external"}
+        title={campaignId ? `Save changes to "${draft.name}"` : `Create campaign "${draft.name}"`}
+        description={autoGen ? "Creates the campaign and writes its documents with AI. Nothing is sent to contacts until you launch." : "Nothing is sent to contacts until you launch."}
+        estimatedCredits={autoGen ? CREDIT_ESTIMATES.documentSet : undefined}
+        confirmLabel={campaignId ? "Save changes" : "Create campaign"}
+        confirming={save.loading}
+        onConfirm={() => void save.mutate(undefined)}
+        onCancel={() => setConfirm(false)}
+      />
+    </div>
+  );
+}

package/blocks/campaigns/components/form-field.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+/**
+ * FormField: a label wrapped around any control, the one small layout piece the campaign editors share.
+ * No SDK operations. Tiers: none.
+ */
+
+import type { ReactNode } from "react";
+import { Label } from "@graph8/sdk/ui";
+
+export interface FormFieldProps {
+  /** Visible label text; also the control's accessible name when `htmlFor` is set. */
+  label: string;
+  /** The id of the control, so the label is clickable and read out. */
+  htmlFor: string;
+  hint?: ReactNode;
+  children: ReactNode;
+  className?: string;
+}
+
+export function FormField({ label, htmlFor, hint, children, className }: FormFieldProps) {
+  return (
+    <div className={`flex flex-col gap-1 ${className ?? ""}`}>
+      <Label htmlFor={htmlFor}>{label}</Label>
+      {children}
+      {hint ? <p className="text-xs text-muted-foreground">{hint}</p> : null}
+    </div>
+  );
+}

package/blocks/campaigns/components/icp-editor.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+/**
+ * IcpEditor: the company profile every campaign is generated from, and the ideal customer profiles (ICPs)
+ * built on it. Edit by hand for free, or let AI rebuild the profile (confirmed first, it spends credits).
+ *
+ * SDK operations, in order:
+ *   1. getCompanyProfile             GET  /company-profile                        (read; via useCompanyProfile)
+ *   2. updateCompanyProfile          PUT  /company-profile                        (write; replaces the stored field set)
+ *   3. generateCompanyProfile        POST /company-profile/generate               (billable, ConfirmSpendDialog; replaces unapproved data)
+ *   4. getCompanyProfileWorkflowStatus GET /company-profile/workflow-status?website_url  (read; polled until settled)
+ *   5. approveCompanyProfile         POST /company-profile/approve                (write; locks the profile)
+ *   6. listIcps                      GET  /icps                                   (read)
+ *   7. createIcp / updateIcp         POST /icps, PATCH /icps/{icp_id}             (write)
+ *   8. archiveIcp                    POST /icps/{icp_id}/archive                  (destructive, ConfirmSpendDialog)
+ *
+ * Tiers: only 3 (billable) and 8 (destructive) open ConfirmSpendDialog. An approved profile is immutable: saving
+ * over one needs the explicit "unlock" box, which sends `unapprove_if_approved`.
+ */
+
+import { useState } from "react";
+import { Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea } 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 { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { g8Get, g8Patch, g8Post, g8Put } from "@/g8/lib/g8-client";
+import { useCompanyProfile } from "../hooks/use-company-profile";
+import { CREDIT_ESTIMATES, commaList, lines, listOf, objectOf, settled, statusClass, text } from "../lib/campaigns-utils";
+import { FormField } from "./form-field";
+
+export interface IcpEditorProps {
+  /** Overrides the website from the saved profile (needed the first time, before a profile exists). */
+  websiteUrl?: string;
+  onChange?: () => void;
+  className?: string;
+}
+
+interface IcpRow {
+  id: string;
+  name?: string | null;
+  description?: string | null;
+  firmographics?: Record<string, unknown> | null;
+  buying_signals?: unknown[] | null;
+  status?: string | null;
+  total_score?: number | null;
+}
+
+const DEFAULT_FIELDS = ["company_name", "industry", "description", "value_proposition"];
+
+function ProfileCard({ websiteUrl: override, onChange }: IcpEditorProps) {
+  const profile = useCompanyProfile(override);
+  const [site, setSite] = useState<string | null>(null);
+  const [edits, setEdits] = useState<Record<string, string>>({});
+  const [unlock, setUnlock] = useState(false);
+  const [confirmGenerate, setConfirmGenerate] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const website = site ?? profile.websiteUrl;
+  const stored = Object.fromEntries(Object.entries(profile.profile?.fields ?? {}).filter(([, v]) => typeof v === "string")) as Record<string, string>;
+  const keys = Array.from(new Set([...DEFAULT_FIELDS, ...Object.keys(stored)]));
+  const value = (k: string) => edits[k] ?? stored[k] ?? "";
+
+  const save = useG8Mutation(
+    () => g8Put("/company-profile", { website_url: website, fields: { ...stored, ...edits }, unapprove_if_approved: unlock }),
+    { onSuccess: () => { setSaved(true); setEdits({}); void profile.refetch(); onChange?.(); } },
+  );
+  const generate = useG8Mutation(() => g8Post("/company-profile/generate", { website_url: website, fields: stored }), {
+    onSuccess: () => { setConfirmGenerate(false); status.start(); },
+    onError: () => setConfirmGenerate(false),
+  });
+  const approve = useG8Mutation(() => g8Post("/company-profile/approve", { website_url: website }), {
+    onSuccess: () => { void profile.refetch(); onChange?.(); },
+  });
+  const status = useJobPoll(
+    async (signal) => (await g8Get("/company-profile/workflow-status", { website_url: website }, { signal })).data,
+    { enabled: false, isTerminal: settled, maxAttempts: 60, onDone: () => { void profile.refetch(); onChange?.(); } },
+  );
+
+  if (profile.error) return <ApiError error={profile.error} title="Could not load the company profile" onRetry={() => void profile.refetch()} />;
+  if (profile.loading && !profile.profile) return <Skeleton className="h-40 w-full" />;
+  const approved = Boolean(profile.profile?.approved);
+  return (
+    <section aria-label="Company profile" className="space-y-3 rounded-md border p-4">
+      <div className="flex items-center justify-between">
+        <h3 className="font-medium">Company profile</h3>
+        <span className={`rounded px-2 py-0.5 text-xs ${statusClass(approved ? "approved" : "draft")}`}>{approved ? "Approved (locked)" : "Not approved"}</span>
+      </div>
+      <FormField label="Website" htmlFor="profile-website" hint="The real company website. Every ICP, persona and campaign is generated from it.">
+        <Input id="profile-website" value={website} placeholder="https://acme.com" onChange={(e) => { setSite(e.target.value); setSaved(false); }} />
+      </FormField>
+      <div className="grid gap-3 sm:grid-cols-2">
+        {keys.map((k) => (
+          <FormField key={k} label={k.replace(/_/g, " ")} htmlFor={`profile-${k}`}>
+            <Input id={`profile-${k}`} value={value(k)} onChange={(e) => { setEdits({ ...edits, [k]: e.target.value }); setSaved(false); }} />
+          </FormField>
+        ))}
+      </div>
+      {approved ? (
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" checked={unlock} onChange={(e) => setUnlock(e.target.checked)} />
+          Unlock the approved profile so this save can overwrite it
+        </label>
+      ) : null}
+      {status.polling ? <p role="status" className="text-sm text-muted-foreground">Building the profile. This can take a minute.</p> : null}
+      {status.done && !status.polling ? <p role="status" className="text-sm text-green-700">Profile build finished.</p> : null}
+      {saved ? <p role="status" className="text-sm text-green-700">Saved.</p> : null}
+      {[save.error, generate.error, approve.error, status.error].map((e, i) => (e ? <ApiError key={i} error={e} /> : null))}
+      <div className="flex flex-wrap gap-2">
+        <Button loading={save.loading} disabled={!website.trim() || (approved && !unlock)} onClick={() => void save.mutate(undefined)}>Save profile</Button>
+        <Button variant="outline" disabled={!website.trim() || approved || status.polling} onClick={() => setConfirmGenerate(true)}>Build with AI</Button>
+        <Button variant="outline" loading={approve.loading} disabled={!profile.profile || approved} onClick={() => void approve.mutate(undefined)}>Approve and lock</Button>
+      </div>
+      <ConfirmSpendDialog
+        open={confirmGenerate}
+        tier="billable"
+        title="Build the company profile with AI"
+        description="Crawls the website and replaces the unapproved profile data. Estimate only."
+        estimatedCredits={CREDIT_ESTIMATES.profileGenerate}
+        confirmLabel="Build profile"
+        confirming={generate.loading}
+        onConfirm={() => void generate.mutate(undefined)}
+        onCancel={() => setConfirmGenerate(false)}
+      />
+    </section>
+  );
+}
+
+interface IcpForm { name: string; description: string; industries: string; size: string; regions: string; signals: string }
+const emptyForm: IcpForm = { name: "", description: "", industries: "", size: "", regions: "", signals: "" };
+
+function formOf(icp: IcpRow): IcpForm {
+  const f = (icp.firmographics ?? {}) as Record<string, unknown>;
+  const arr = (v: unknown) => (Array.isArray(v) ? v.join(", ") : text(v));
+  return {
+    name: icp.name ?? "", description: icp.description ?? "", industries: arr(f.industries), size: text(f.company_size), regions: arr(f.regions),
+    signals: (icp.buying_signals ?? []).map((s) => text(s)).filter(Boolean).join("\n"),
+  };
+}
+
+export function IcpEditor(props: IcpEditorProps) {
+  const { onChange, className } = props;
+  const profile = useCompanyProfile(props.websiteUrl);
+  const icps = useG8Query((signal) => g8Get("/icps", { limit: 100 }, { signal }), []);
+  const [editing, setEditing] = useState<IcpRow | "new" | null>(null);
+  const [form, setForm] = useState<IcpForm>(emptyForm);
+  const [archiving, setArchiving] = useState<IcpRow | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const done = () => { void icps.refetch(); onChange?.(); };
+  const saveIcp = useG8Mutation(async () => {
+    const existing = editing && editing !== "new" ? editing : null;
+    const firmographics = { ...(existing?.firmographics ?? {}), industries: commaList(form.industries), company_size: form.size, regions: commaList(form.regions) };
+    const body = { name: form.name.trim(), description: form.description, firmographics, buying_signals: lines(form.signals) };
+    return existing ? g8Patch(`/icps/${existing.id}`, body) : g8Post("/icps", { ...body, website_url: profile.websiteUrl });
+  }, { onSuccess: () => { setEditing(null); done(); } });
+  const archive = useG8Mutation(async (icp: IcpRow) => {
+    setBusyId(icp.id);
+    try { await g8Post(`/icps/${icp.id}/archive`, {}); } finally { setBusyId(null); setArchiving(null); }
+  }, { onSuccess: done });
+
+  const rows = listOf<IcpRow>(icps.data);
+  const open = (icp: IcpRow | "new") => { setForm(icp === "new" ? emptyForm : formOf(icp)); setEditing(icp); saveIcp.reset(); };
+  const set = (k: keyof IcpForm) => (e: { target: { value: string } }) => setForm({ ...form, [k]: e.target.value });
+
+  return (
+    <div className={`space-y-6 ${className ?? ""}`}>
+      <ProfileCard {...props} />
+      <section aria-label="Ideal customer profiles" className="space-y-3">
+        <div className="flex items-center justify-between">
+          <h3 className="font-medium">Ideal customer profiles</h3>
+          <Button size="sm" disabled={!profile.websiteUrl} onClick={() => open("new")}>Add ICP</Button>
+        </div>
+        {!profile.websiteUrl ? <p className="text-sm text-muted-foreground">Save the company website above before adding an ICP.</p> : null}
+        {icps.error ? <ApiError error={icps.error} title="Could not load ICPs" onRetry={() => void icps.refetch()} /> : null}
+        {archive.error ? <ApiError error={archive.error} title="Could not archive the ICP" /> : null}
+        <Table>
+          <TableHeader><TableRow><TableHead>Name</TableHead><TableHead>Description</TableHead><TableHead>Status</TableHead><TableHead className="w-40" /></TableRow></TableHeader>
+          <TableBody>
+            {icps.loading && !icps.data ? <TableRow><TableCell colSpan={4}><Skeleton className="h-6 w-full" /></TableCell></TableRow> : null}
+            {rows.map((icp) => (
+              <TableRow key={icp.id}>
+                <TableCell className="font-medium">{icp.name}</TableCell>
+                <TableCell className="max-w-md truncate text-muted-foreground">{icp.description}</TableCell>
+                <TableCell><span className={`rounded px-2 py-0.5 text-xs ${statusClass(icp.status)}`}>{icp.status ?? "active"}</span></TableCell>
+                <TableCell className="space-x-2 text-right">
+                  <Button size="sm" variant="outline" aria-label={`Edit ${icp.name}`} onClick={() => open(icp)}>Edit</Button>
+                  <Button size="sm" variant="outline" aria-label={`Archive ${icp.name}`} loading={busyId === icp.id} onClick={() => setArchiving(icp)}>Archive</Button>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        {!icps.loading && !icps.error && rows.length === 0 ? <EmptyState title="No ICPs yet" description="Describe who you sell to. Campaigns and personas build on it." /> : null}
+      </section>
+
+      <Dialog open={editing !== null} onOpenChange={(o) => { if (!o) setEditing(null); }}>
+        <DialogContent>
+          <DialogHeader><DialogTitle>{editing === "new" ? "Add ICP" : "Edit ICP"}</DialogTitle></DialogHeader>
+          <div className="space-y-3">
+            <FormField label="Name" htmlFor="icp-name"><Input id="icp-name" value={form.name} onChange={set("name")} /></FormField>
+            <FormField label="Description" htmlFor="icp-description"><Textarea id="icp-description" value={form.description} onChange={set("description")} /></FormField>
+            <FormField label="Industries" htmlFor="icp-industries" hint="Comma separated."><Input id="icp-industries" value={form.industries} onChange={set("industries")} /></FormField>
+            <FormField label="Company size" htmlFor="icp-size"><Input id="icp-size" value={form.size} placeholder="50-500 employees" onChange={set("size")} /></FormField>
+            <FormField label="Regions" htmlFor="icp-regions" hint="Comma separated."><Input id="icp-regions" value={form.regions} onChange={set("regions")} /></FormField>
+            <FormField label="Buying signals" htmlFor="icp-signals" hint="One per line."><Textarea id="icp-signals" value={form.signals} onChange={set("signals")} /></FormField>
+            {saveIcp.error ? <ApiError error={saveIcp.error} title="Could not save the ICP" /> : null}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditing(null)}>Cancel</Button>
+            <Button loading={saveIcp.loading} disabled={!form.name.trim()} onClick={() => void saveIcp.mutate(undefined)}>Save ICP</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <ConfirmSpendDialog
+        open={archiving !== null}
+        tier="destructive"
+        title={`Archive ${archiving?.name ?? "this ICP"}`}
+        description="It drops out of the default list. Campaigns already created from it are unaffected."
+        affected={1}
+        confirmLabel="Archive ICP"
+        confirming={archive.loading}
+        onConfirm={() => archiving && void archive.mutate(archiving)}
+        onCancel={() => setArchiving(null)}
+      />
+    </div>
+  );
+}