@graph8/sdk 0.362.0 → 0.373.0

package/blocks/campaigns/components/campaigns-screen.tsx

@@ -0,0 +1,267 @@
+"use client";
+
+/**
+ * CampaignsScreen: the finished "Campaigns" page (the AI campaign builder).
+ *
+ * Composes: CampaignList (browse, open, delete), CampaignWizard (idea -> create -> audience -> steps -> launch),
+ * CampaignMetrics, CampaignAssets (documents), CampaignAudienceStep, CampaignSequenceStep, CampaignLaunchStep,
+ * IcpEditor (company profile + ICPs) and PersonaEditor.
+ *
+ * Every record has a complete detail, beside the list or as a full page (`?view=full`): campaign, document
+ * (`?doc=`), ICP (IcpDetail) and persona (PersonaDetail).
+ *
+ * User flows:
+ *   - Campaigns tab: browse campaigns, open one (deep link `?id=`), delete one (confirmed).
+ *   - "New campaign" opens the wizard in a sheet: AI ideas (confirmed credit estimate), create, audience, steps
+ *     and copy, launch (confirmed).
+ *   - An open campaign has tabs: Details (read and edit name/goal/brief, confirmed), Metrics (7/30/90/365 days),
+ *     Documents (read, edit, rewrite with AI, add, delete), Audience, Sequence and Launch.
+ *   - Company profile tab (profile and ICPs) and Personas tab: the context the AI writes from.
+ *
+ * SDK operations of its own:
+ *   1. getCampaign     GET   /campaigns/{campaign_id}  (read; header and Details of the open campaign)
+ *   2. updateCampaign  PATCH /campaigns/{campaign_id}  (external: confirmed; name, goal and brief only)
+ * Billable, external and destructive calls in the composed parts open ConfirmSpendDialog there.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Megaphone, Plus } from "lucide-react";
+import { Button, Input, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import type { Tone } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get, g8Patch } from "@/g8/lib/g8-client";
+import { audienceOf, fieldItems, objectOf } from "../lib/campaigns-utils";
+import type { CampaignRow } from "../lib/campaigns-utils";
+import { CampaignAssets } from "./campaign-assets";
+import { CampaignAudienceStep } from "./campaign-audience-step";
+import { CampaignLaunchStep } from "./campaign-launch-step";
+import { CampaignList } from "./campaign-list";
+import { CampaignMetrics } from "./campaign-metrics";
+import { CampaignSequenceStep } from "./campaign-sequence-step";
+import { CampaignWizard } from "./campaign-wizard";
+import { FormField } from "./form-field";
+import { IcpDetail } from "./icp-detail";
+import { IcpEditor } from "./icp-editor";
+import { PersonaDetail } from "./persona-detail";
+import { PersonaEditor } from "./persona-editor";
+
+export interface CampaignsScreenProps {
+  /** Overrides the website from the saved company profile (needed before a profile exists). */
+  websiteUrl?: string;
+  /** Extra buttons in the screen header. */
+  toolbarActions?: ReactNode;
+  /** Extra buttons in the open campaign's header. */
+  renderDetailActions?: (campaign: CampaignRow) => ReactNode;
+  /** Extra tabs in the open campaign's panel. */
+  extraDetailTabs?: { id: string; label: string; render: (campaign: CampaignRow) => ReactNode }[];
+  className?: string;
+}
+
+const TABS = [
+  { id: "campaigns", label: "Campaigns" },
+  { id: "profile", label: "Company profile" },
+  { id: "personas", label: "Personas" },
+];
+
+/** Campaign status -> pill tone. Unknown states are a warning, never green. */
+export function campaignTone(status: string | null | undefined): Tone {
+  const s = (status ?? "").toLowerCase();
+  if (["active", "live", "launched", "completed", "complete", "done"].includes(s)) return "positive";
+  if (["draft", "pending", "generating", "running", "in_progress", "copy_in_progress", "scheduling"].includes(s)) return "info";
+  if (["paused", "archived"].includes(s)) return "neutral";
+  return s ? "warning" : "neutral";
+}
+
+function Details({ campaign, full, onSaved }: { campaign: CampaignRow; full: unknown; onSaved: () => void }) {
+  const [edit, setEdit] = useState<{ name: string; goal: string; brief: string } | null>(null);
+  const [confirm, setConfirm] = useState(false);
+  const save = useG8Mutation(
+    (v: { name: string; goal: string; brief: string }) => g8Patch(`/campaigns/${campaign.id}`, v),
+    { onSuccess: () => { setConfirm(false); setEdit(null); onSaved(); }, onError: () => setConfirm(false) },
+  );
+  const audience = audienceOf(full);
+  if (!edit)
+    return (
+      <div className="space-y-4">
+        <KeyValueList
+          columns={2}
+          items={[
+            ...fieldItems(Object.fromEntries(Object.entries(campaign).filter(([k, v]) => k !== "brief" && typeof v !== "object"))),
+            { label: "Audience", value: audience.listId ? `${audience.name || `List ${audience.listId}`}${audience.size != null ? ` (${audience.size.toLocaleString()} contacts)` : ""}` : "None attached" },
+          ]}
+        />
+        {campaign.brief ? <p className="whitespace-pre-wrap text-sm">{campaign.brief}</p> : null}
+        <Button size="sm" variant="outline" onClick={() => setEdit({ name: campaign.name ?? "", goal: campaign.goal ?? "", brief: campaign.brief ?? "" })}>
+          Edit details
+        </Button>
+      </div>
+    );
+  return (
+    <div className="space-y-3">
+      <FormField label="Name" htmlFor="cmp-name"><Input id="cmp-name" value={edit.name} onChange={(e) => setEdit({ ...edit, name: e.target.value })} /></FormField>
+      <FormField label="Goal" htmlFor="cmp-goal"><Input id="cmp-goal" value={edit.goal} onChange={(e) => setEdit({ ...edit, goal: e.target.value })} /></FormField>
+      <FormField label="Brief" htmlFor="cmp-brief"><Textarea id="cmp-brief" rows={5} value={edit.brief} onChange={(e) => setEdit({ ...edit, brief: e.target.value })} /></FormField>
+      {save.error ? <ApiError error={save.error} title="Could not save the campaign" onRetry={save.reset} /> : null}
+      <div className="flex gap-2">
+        <Button size="sm" disabled={!edit.name.trim()} onClick={() => setConfirm(true)}>Save changes</Button>
+        <Button size="sm" variant="ghost" onClick={() => setEdit(null)}>Cancel</Button>
+      </div>
+      <ConfirmSpendDialog
+        open={confirm}
+        tier="external"
+        title={`Save changes to "${campaign.name ?? "this campaign"}"`}
+        description="The campaign details are replaced with what you see. Nobody is contacted."
+        confirmLabel="Save changes"
+        confirming={save.loading}
+        onCancel={() => setConfirm(false)}
+        onConfirm={() => void save.mutate({ name: edit.name.trim(), goal: edit.goal, brief: edit.brief })}
+      />
+    </div>
+  );
+}
+
+interface DetailProps {
+  id: string;
+  props: CampaignsScreenProps;
+  tab?: string;
+  onTabChange: (tab: string) => void;
+  docId?: string;
+  onDocChange: (id: string | null) => void;
+  onClose: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+}
+
+function Detail({ id, props, tab, onTabChange, docId, onDocChange, onClose, onExpand, onCollapse }: DetailProps) {
+  const base = useG8Query((signal) => g8Get(`/campaigns/${id}`, undefined, { signal }), [id]);
+  const full = useG8Query((signal) => g8Get(`/campaigns/${id}/full`, undefined, { signal }), [id]);
+  const c = { id, ...objectOf(full.data), ...objectOf(base.data) } as CampaignRow;
+  const refetch = () => { void base.refetch(); void full.refetch(); };
+  if ((base.error as { status?: number } | null)?.status === 404)
+    return (
+      <div className="space-y-2 p-4 text-sm">
+        <p>This campaign no longer exists.</p>
+        <Button size="sm" variant="outline" onClick={onClose}>Close</Button>
+      </div>
+    );
+  if (base.error) return <ApiError error={base.error} title="Could not load the campaign" onRetry={() => void base.refetch()} />;
+  return (
+    <DetailPanel
+      title={c.name ?? `Campaign ${id}`}
+      subtitle={c.goal ?? undefined}
+      badges={c.status ? <StatusPill tone={campaignTone(c.status)} dot>{c.status}</StatusPill> : null}
+      actions={props.renderDetailActions?.(c)}
+      onClose={onClose}
+      onExpand={onExpand}
+      onCollapse={onCollapse}
+      activeTab={tab}
+      onTabChange={onTabChange}
+      tabs={[
+        {
+          id: "details",
+          label: "Details",
+          // Until the campaign itself has loaded, `c` is only `{ id }`: "Edit details" would seed the form with empty
+          // name, goal and brief, and saving would blank the real values. Show a skeleton until the record is here.
+          content: base.data === undefined ? (
+            <div className="space-y-2" aria-busy="true" data-testid="campaign-details-loading"><Skeleton className="h-24 w-full" /><Skeleton className="h-8 w-32" /></div>
+          ) : (
+            <Details campaign={c} full={full.data} onSaved={refetch} />
+          ),
+        },
+        { id: "metrics", label: "Metrics", content: <CampaignMetrics campaignId={id} /> },
+        { id: "documents", label: "Documents", content: <CampaignAssets campaignId={id} documentId={docId ?? null} onDocumentChange={onDocChange} /> },
+        { id: "audience", label: "Audience", content: <CampaignAudienceStep campaignId={id} onAttached={refetch} /> },
+        { id: "sequence", label: "Sequence", content: <CampaignSequenceStep campaignId={id} /> },
+        { id: "launch", label: "Launch", content: <CampaignLaunchStep campaignId={id} onLaunched={refetch} /> },
+        ...(props.extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(c) })),
+      ]}
+    />
+  );
+}
+
+export function CampaignsScreen(props: CampaignsScreenProps) {
+  const [tab, setTab] = useUrlState("tab", "campaigns");
+  const [selectedId, setSelectedId] = useUrlState("id", "");
+  const [detailTab, setDetailTab] = useUrlState("dtab", "");
+  const [docId, setDocId] = useUrlState("doc", "");
+  const [view, setView] = useUrlState("view", "");
+  const [creating, setCreating] = useState(false);
+  const [version, setVersion] = useState(0);
+  const bump = () => setVersion((v) => v + 1);
+  const go = (nextTab: string, id: string) => { setTab(nextTab === "campaigns" ? null : nextTab); setSelectedId(id || null); setDetailTab(null); setDocId(null); setView(null); };
+  const close = () => { setSelectedId(null); setDetailTab(null); setDocId(null); setView(null); };
+  const create = (
+    <Button onClick={() => setCreating(true)}>
+      <Plus className="mr-1 h-4 w-4" aria-hidden /> New campaign
+    </Button>
+  );
+  const active = TABS.some((t) => t.id === tab) ? tab : "campaigns";
+
+  return (
+    <ScreenLayout
+      className={props.className}
+      title="Campaigns"
+      description="Plan, write and launch AI-assisted outreach campaigns."
+      icon={<Megaphone className="h-5 w-5" aria-hidden />}
+      actions={<>{props.toolbarActions}{create}</>}
+      tabs={TABS}
+      activeTab={active}
+      onTabChange={(id) => go(id, "")}
+    >
+      {active === "profile" ? (
+        <SplitView
+          expanded={view === "full"} onExpandedChange={(e) => setView(e ? "full" : null)}
+          detailOpen={Boolean(selectedId)}
+          onCloseDetail={close}
+          list={<IcpEditor websiteUrl={props.websiteUrl} refreshKey={version} onOpen={(i) => go("profile", i.id)} />}
+          detail={selectedId ? <IcpDetail key={selectedId} icpId={selectedId} onExpand={view === "full" ? undefined : () => setView("full")} onCollapse={view === "full" ? () => setView(null) : undefined} onClose={close} onChanged={bump} /> : null}
+        />
+      ) : active === "personas" ? (
+        <SplitView
+          expanded={view === "full"} onExpandedChange={(e) => setView(e ? "full" : null)}
+          detailOpen={Boolean(selectedId)}
+          onCloseDetail={close}
+          list={<PersonaEditor websiteUrl={props.websiteUrl} refreshKey={version} onOpen={(p) => go("personas", p.id)} />}
+          detail={selectedId ? <PersonaDetail key={selectedId} personaId={selectedId} onExpand={view === "full" ? undefined : () => setView("full")} onCollapse={view === "full" ? () => setView(null) : undefined} onClose={close} onChanged={bump} onOpenCampaign={(c) => go("campaigns", c.id)} /> : null}
+        />
+      ) : (
+        <SplitView
+          expanded={view === "full"} onExpandedChange={(e) => setView(e ? "full" : null)}
+          detailOpen={Boolean(selectedId)}
+          onCloseDetail={close}
+          detailWidth="xl"
+          list={<CampaignList linkParam="id" key={version} onOpen={(c) => go("campaigns", c.id)} emptyAction={create} />}
+          detail={
+            selectedId ? (
+              <Detail
+                key={selectedId}
+                id={selectedId}
+                props={props}
+                onExpand={view === "full" ? undefined : () => setView("full")} onCollapse={view === "full" ? () => setView(null) : undefined}
+                tab={detailTab || undefined}
+                onTabChange={(t) => setDetailTab(t === "details" ? null : t)}
+                docId={docId || undefined}
+                onDocChange={(d) => setDocId(d)}
+                onClose={close}
+              />
+            ) : null
+          }
+        />
+      )}
+      <FormSheet width="xl" open={creating} onOpenChange={(o) => { setCreating(o); if (!o) bump(); }} title="New campaign" description="From an idea to a launched campaign in five steps.">
+        {creating ? <CampaignWizard websiteUrl={props.websiteUrl} onLaunched={bump} /> : null}
+      </FormSheet>
+    </ScreenLayout>
+  );
+}

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

@@ -0,0 +1,163 @@
+"use client";
+
+/**
+ * IcpDetail: one ideal customer profile, complete. Every field (firmographics, buying signals, score,
+ * status) and every action: edit, pin or unpin, archive.
+ *
+ * SDK operations, in order:
+ *   1. listIcps     GET   /icps                  (read; the API has no single-ICP read, so the row is found in the list)
+ *   2. updateIcp    PATCH /icps/{icp_id}         (write)
+ *   3. pinIcp / unpinIcp  POST /icps/{icp_id}/pin|unpin  (write)
+ *   4. archiveIcp   POST  /icps/{icp_id}/archive (destructive: confirmed)
+ *
+ * Related records: the API links no campaign to an ICP, so none are listed.
+ */
+
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button, Input, Skeleton, Textarea } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { FirstNotice } from "@/g8/components/paging-notices";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { FormSheet } from "@/g8/components/screen/form-sheet";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Patch, g8Post } from "@/g8/lib/g8-client";
+import { fieldItems, icpFormOf, icpPatch, listOf, text } from "../lib/campaigns-utils";
+import { FormField } from "./form-field";
+
+export interface IcpDetailProps {
+  icpId: string;
+  onClose?: () => void;
+  /** Full-page mode: show an "Open full page" (onExpand) or "Back to split view" (onCollapse) button. */
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  /** Called after an edit, pin or archive so a list can refresh. */
+  onChanged?: () => void;
+  renderActions?: (icp: Record<string, unknown>) => ReactNode;
+  className?: string;
+}
+
+interface Form { name: string; description: string; industries: string; size: string; regions: string; signals: string }
+
+/** The API returns `pinned` (`is_pinned` is accepted too, for older payloads). */
+function isPinned(r: Record<string, unknown> | undefined): boolean {
+  return Boolean(r && (r.pinned ?? r.is_pinned));
+}
+
+/** The ICP API has no paging: when the read is full, a missing ICP may just be beyond it, and the screen says so. */
+const ICP_LIMIT = 200;
+
+export function IcpDetail({ icpId, onClose, onExpand, onCollapse, onChanged, renderActions, className }: IcpDetailProps) {
+  const [form, setForm] = useState<Form | null>(null);
+  const [archiving, setArchiving] = useState(false);
+  const q = useG8Query((signal) => g8Get("/icps", { limit: ICP_LIMIT }, { signal }), [icpId]);
+  const icp = listOf<Record<string, any>>(q.data).find((r) => String(r.id) === icpId);
+
+  const save = useG8Mutation(async (f: Form) => {
+    const patch = icp ? icpPatch(icp, f) : {};
+    if (Object.keys(patch).length > 0) await g8Patch(`/icps/${icpId}`, patch); // nothing changed: no request
+    setForm(null);
+    await q.refetch();
+    onChanged?.();
+  });
+  const pin = useG8Mutation(async () => {
+    await g8Post(`/icps/${icpId}/${isPinned(icp) ? "unpin" : "pin"}`, {});
+    await q.refetch();
+    onChanged?.();
+  });
+  const archive = useG8Mutation(async () => {
+    await g8Post(`/icps/${icpId}/archive`, {});
+    setArchiving(false);
+    onChanged?.();
+    onClose?.();
+  }, { onError: () => setArchiving(false) });
+
+  if (q.error) return <ApiError error={q.error} title="Could not load the ICP" onRetry={() => void q.refetch()} className={className} />;
+  if (q.loading && !q.data) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
+  if (!icp) return (
+    <div className={`p-4 text-sm ${className ?? ""}`}>
+      <p>This ICP no longer exists or was archived.</p>
+      <FirstNotice shown={listOf(q.data).length} limit={ICP_LIMIT} noun="ICPs" />
+    </div>
+  );
+
+  const f = (icp.firmographics ?? {}) as Record<string, unknown>;
+  const arr = (v: unknown) => (Array.isArray(v) ? v.join(", ") : text(v));
+  const startEdit = () => {
+    save.reset();
+    setForm(icpFormOf(icp));
+  };
+  const set = (k: keyof Form) => (e: { target: { value: string } }) => setForm((cur) => (cur ? { ...cur, [k]: e.target.value } : cur));
+  return (
+    <DetailPanel
+      className={className}
+      title={icp.name ?? `ICP ${icpId}`}
+      subtitle={icp.description ?? undefined}
+      badges={<><StatusPill tone={icp.status && icp.status !== "active" ? "neutral" : "positive"} dot>{icp.status ?? "active"}</StatusPill>{isPinned(icp) ? <StatusPill tone="info">pinned</StatusPill> : null}</>}
+      actions={
+        <>
+          <Button size="sm" variant="outline" onClick={startEdit}>Edit ICP</Button>
+          <Button size="sm" variant="outline" loading={pin.loading} onClick={() => void pin.mutate(undefined)}>{isPinned(icp) ? "Unpin ICP" : "Pin ICP"}</Button>
+          <Button size="sm" variant="outline" onClick={() => setArchiving(true)}>Archive ICP</Button>
+          {renderActions?.(icp)}
+          <FormSheet
+            open={form !== null}
+            onOpenChange={(o) => !o && setForm(null)}
+            title="Edit ICP"
+            footer={<><Button variant="outline" onClick={() => setForm(null)}>Cancel</Button><Button loading={save.loading} disabled={!form?.name.trim()} onClick={() => form && void save.mutate(form)}>Save ICP</Button></>}
+          >
+            {form ? (
+              <>
+                <FormField label="Name" htmlFor="icpd-name"><Input id="icpd-name" value={form.name} onChange={set("name")} /></FormField>
+                <FormField label="Description" htmlFor="icpd-desc"><Textarea id="icpd-desc" value={form.description} onChange={set("description")} /></FormField>
+                <FormField label="Industries" htmlFor="icpd-ind" hint="Comma separated."><Input id="icpd-ind" value={form.industries} onChange={set("industries")} /></FormField>
+                <FormField label="Company size" htmlFor="icpd-size"><Input id="icpd-size" value={form.size} onChange={set("size")} /></FormField>
+                <FormField label="Regions" htmlFor="icpd-reg" hint="Comma separated."><Input id="icpd-reg" value={form.regions} onChange={set("regions")} /></FormField>
+                <FormField label="Buying signals" htmlFor="icpd-sig" hint="One per line."><Textarea id="icpd-sig" value={form.signals} onChange={set("signals")} /></FormField>
+                {save.error ? <ApiError error={save.error} title="Could not save the ICP" /> : null}
+              </>
+            ) : null}
+          </FormSheet>
+          <ConfirmSpendDialog
+            open={archiving}
+            tier="destructive"
+            title={`Archive ${icp.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}
+            onCancel={() => setArchiving(false)}
+            onConfirm={() => void archive.mutate(undefined)}
+          />
+        </>
+      }
+      onClose={onClose}
+      onExpand={onExpand}
+      onCollapse={onCollapse}
+      tabs={[
+        {
+          id: "details",
+          label: "Details",
+          content: (
+            <div className="space-y-4">
+              {[pin.error, archive.error].map((e, i) => (e ? <ApiError key={i} error={e} /> : null))}
+              <KeyValueList columns={2} items={[...fieldItems({ industries: f.industries, company_size: f.company_size, regions: f.regions }), ...fieldItems(Object.fromEntries(Object.entries(icp).filter(([k]) => !["firmographics", "buying_signals", "name", "description"].includes(k))))]} />
+              <SectionCard title="Buying signals" description="What tells you an account fits.">
+                {((icp.buying_signals ?? []) as unknown[]).length === 0 ? (
+                  <p className="text-sm text-muted-foreground">No buying signals yet.</p>
+                ) : (
+                  <ul className="list-disc space-y-1 pl-5 text-sm">{((icp.buying_signals ?? []) as unknown[]).map((s, i) => <li key={i}>{text(s)}</li>)}</ul>
+                )}
+              </SectionCard>
+            </div>
+          ),
+        },
+      ]}
+    />
+  );
+}

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

@@ -21,6 +21,7 @@
 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 { FirstNotice } from "@/g8/components/paging-notices";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
@@ -28,13 +29,17 @@ 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 { CREDIT_ESTIMATES, commaList, icpFormOf, icpPatch, 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;
+  /** Called when an ICP's name is clicked (a screen opens its detail). Without it the name is plain text. */
+  onOpen?: (icp: { id: string; name?: string | null }) => void;
+  /** Change it to reload the list (the detail edited or archived an ICP). */
+  refreshKey?: number;
   className?: string;
 }
 
@@ -104,8 +109,8 @@ function ProfileCard({ websiteUrl: override, onChange }: IcpEditorProps) {
         </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}
+      {status.done && !status.polling ? <p role="status" className="text-sm text-positive-foreground">Profile build finished.</p> : null}
+      {saved ? <p role="status" className="text-sm text-positive-foreground">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>
@@ -130,19 +135,15 @@ function ProfileCard({ websiteUrl: override, onChange }: IcpEditorProps) {
 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"),
-  };
-}
+const formOf = (icp: IcpRow): IcpForm => icpFormOf(icp as Record<string, any>);
+
+/** The ICP API has no paging: a full read is announced under the table. */
+const ICP_LIMIT = 100;
 
 export function IcpEditor(props: IcpEditorProps) {
-  const { onChange, className } = props;
+  const { onChange, onOpen, className } = props;
   const profile = useCompanyProfile(props.websiteUrl);
-  const icps = useG8Query((signal) => g8Get("/icps", { limit: 100 }, { signal }), []);
+  const icps = useG8Query((signal) => g8Get("/icps", { limit: ICP_LIMIT }, { signal }), [props.refreshKey]);
   const [editing, setEditing] = useState<IcpRow | "new" | null>(null);
   const [form, setForm] = useState<IcpForm>(emptyForm);
   const [archiving, setArchiving] = useState<IcpRow | null>(null);
@@ -151,9 +152,12 @@ export function IcpEditor(props: IcpEditorProps) {
   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 });
+    if (existing) {
+      const patch = icpPatch(existing as Record<string, any>, form);
+      return Object.keys(patch).length > 0 ? g8Patch(`/icps/${existing.id}`, patch) : undefined; // nothing changed: no request
+    }
+    const firmographics = { industries: commaList(form.industries), company_size: form.size, regions: commaList(form.regions) };
+    return g8Post("/icps", { name: form.name.trim(), description: form.description, firmographics, buying_signals: lines(form.signals), website_url: profile.websiteUrl });
   }, { onSuccess: () => { setEditing(null); done(); } });
   const archive = useG8Mutation(async (icp: IcpRow) => {
     setBusyId(icp.id);
@@ -181,7 +185,7 @@ export function IcpEditor(props: IcpEditorProps) {
             {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="font-medium">{onOpen ? <button type="button" className="text-left hover:underline" aria-label={`Open ${icp.name}`} onClick={() => onOpen(icp)}>{icp.name}</button> : 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">
@@ -192,6 +196,7 @@ export function IcpEditor(props: IcpEditorProps) {
             ))}
           </TableBody>
         </Table>
+        <FirstNotice shown={rows.length} limit={ICP_LIMIT} noun="ICPs" />
         {!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>