@graph8/sdk 0.370.0 → 0.374.0

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

@@ -0,0 +1,180 @@
+"use client";
+
+/**
+ * CampaignLinksTab: the landing pages, workflows and newsletters tied to ONE campaign. Each row opens the record in
+ * your app (`onOpen*` callbacks route to your own screens), and a landing page or newsletter can be linked or unlinked
+ * here. Use it as an `extraDetailTabs` entry of CampaignsScreen:
+ *   { id: "links", label: "Links", render: (c) => <CampaignLinksTab campaignId={c.id} onOpenLandingPage={(id) => router.push(`/pages?id=${id}`)} /> }
+ *
+ * SDK operations, in order:
+ *   1. listCampaignLandingPages   GET    /campaigns/{id}/landing-pages                    (read)
+ *      listLandingPages           GET    /landing-pages?limit&offset                      (read; the "link a page" choices, paged)
+ *      linkLandingPageToCampaign  POST   /campaigns/{id}/landing-pages                    (write)
+ *      unlinkLandingPageFromCampaign DELETE /campaigns/{id}/landing-pages/{page}          (DESTRUCTIVE tier -> ConfirmSpendDialog; the page itself is kept)
+ *   2. listCampaignWorkflows      GET    /campaigns/{id}/workflows                        (read)
+ *      unlinkCampaignWorkflow     DELETE /campaigns/{id}/workflows/{link_id}              (DESTRUCTIVE tier -> ConfirmSpendDialog; the workflow itself is kept)
+ *   3. listNewsletters            GET    /newsletters                                     (read; each row names its campaign_id)
+ *      linkNewsletterCampaign     PUT    /newsletters/{id}/campaign                       (write; a newsletter has ONE campaign)
+ *      unlinkNewsletterCampaign   DELETE /newsletters/{id}/campaign                       (DESTRUCTIVE tier -> ConfirmSpendDialog; the newsletter is kept)
+ *
+ * API gaps, stated on screen: there is no operation that links a workflow to a campaign (only list, edit and unlink),
+ * and a newsletter that already belongs to ANOTHER campaign is not offered, because linking replaces its campaign.
+ */
+
+import { useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ExternalLink, Link2, Unlink } from "lucide-react";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { useAllPages } from "@/g8/hooks/use-all-pages";
+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 { hasNextOf } from "@/g8/lib/paging";
+import { text } from "../lib/campaigns-utils";
+
+export interface CampaignLinksTabProps {
+  /** The campaign (id or slug as the list gave it). */
+  campaignId: string;
+  /** Route to a landing page / workflow / newsletter in your app. A section without its callback shows names only. */
+  onOpenLandingPage?: (landingPageId: string) => void;
+  onOpenWorkflow?: (workflowId: string) => void;
+  onOpenNewsletter?: (newsletterId: string) => void;
+  className?: string;
+}
+
+type Row = Record<string, unknown>;
+const PAGE = 100;
+
+/** The rows of a list payload under any of the keys the API mirrors them on. */
+export function rowsOf(env: unknown, ...keys: string[]): Row[] {
+  const data = (env as { data?: unknown } | null)?.data;
+  if (Array.isArray(data)) return data as Row[];
+  const o = (data ?? {}) as Record<string, unknown>;
+  for (const k of ["items", ...keys]) if (Array.isArray(o[k])) return o[k] as Row[];
+  return [];
+}
+
+const idOf = (v: unknown): string => text(v).trim();
+
+function LinkRow({ name, meta, onOpen, onUnlink, busy }: { name: string; meta?: string; onOpen?: () => void; onUnlink?: () => void; busy?: boolean }) {
+  return (
+    <li className="flex items-center justify-between gap-3 py-2 text-sm">
+      <span className="min-w-0 truncate"><span className="font-medium">{name}</span>{meta ? <span className="text-muted-foreground"> · {meta}</span> : null}</span>
+      <span className="flex shrink-0 gap-2">
+        {onOpen ? <Button size="sm" variant="outline" onClick={onOpen} aria-label={`Open ${name}`}><ExternalLink className="mr-1 size-4" aria-hidden />Open</Button> : null}
+        {onUnlink ? <Button size="sm" variant="ghost" disabled={busy} onClick={onUnlink} aria-label={`Unlink ${name}`}><Unlink className="mr-1 size-4" aria-hidden />Unlink</Button> : null}
+      </span>
+    </li>
+  );
+}
+
+function LinkPicker({ label, options, busy, onLink }: { label: string; options: Array<{ id: string; name: string }>; busy: boolean; onLink: (id: string) => void }) {
+  const [value, setValue] = useState("");
+  return (
+    <div className="flex items-center gap-2 pt-2">
+      <select aria-label={label} className="h-9 min-w-56 rounded-md border bg-background px-2 text-sm" value={value} onChange={(e) => setValue(e.target.value)}>
+        <option value="">{options.length ? label : "Nothing left to link"}</option>
+        {options.map((o) => <option key={o.id} value={o.id}>{o.name}</option>)}
+      </select>
+      <Button size="sm" disabled={!value || busy} loading={busy} onClick={() => { onLink(value); setValue(""); }}><Link2 className="mr-1 size-4" aria-hidden />Link</Button>
+    </div>
+  );
+}
+
+type Pending = { kind: "page" | "workflow" | "newsletter"; id: string; name: string };
+
+export function CampaignLinksTab({ campaignId, onOpenLandingPage, onOpenWorkflow, onOpenNewsletter, className }: CampaignLinksTabProps) {
+  const base = `/campaigns/${encodeURIComponent(campaignId)}`;
+  const pages = useG8Query(async (signal) => rowsOf(await g8Get(`${base}/landing-pages`, undefined, { signal }), "landing_pages"), [campaignId], { key: ["campaigns", "links", "pages", campaignId] });
+  const flows = useG8Query(async (signal) => rowsOf(await g8Get(`${base}/workflows`, undefined, { signal }), "workflows"), [campaignId], { key: ["campaigns", "links", "workflows", campaignId] });
+  const letters = useG8Query(async (signal) => rowsOf(await g8Get("/newsletters", undefined, { signal }), "newsletters"), [campaignId], { key: ["campaigns", "links", "newsletters"] });
+  const allPages = useAllPages<Row>(async (page, signal) => {
+    const env = await g8Get("/landing-pages", { limit: PAGE, offset: (page - 1) * PAGE }, { signal });
+    const rows = rowsOf(env, "pages", "landing_pages");
+    return { rows, hasNext: hasNextOf(env, PAGE, rows.length) };
+  }, [], { pageSize: PAGE });
+  const [pending, setPending] = useState<Pending | null>(null);
+  const refresh = () => { void pages.refetch(); void flows.refetch(); void letters.refetch(); };
+  const link = useG8Mutation(async (v: { kind: "page" | "newsletter"; id: string }) => {
+    if (v.kind === "page") await g8Post(`${base}/landing-pages`, { landing_page_id: v.id });
+    else await g8Put(`/newsletters/${encodeURIComponent(v.id)}/campaign`, { campaign_id: campaignId });
+  }, { onSuccess: refresh });
+  const unlink = useG8Mutation(async (p: Pending) => {
+    try {
+      if (p.kind === "page") await g8Delete(`${base}/landing-pages/${encodeURIComponent(p.id)}`);
+      else if (p.kind === "workflow") await g8Delete(`${base}/workflows/${encodeURIComponent(p.id)}`);
+      else await g8Delete(`/newsletters/${encodeURIComponent(p.id)}/campaign`);
+    } catch (err) {
+      if ((err as { status?: number }).status !== 404) throw err; // already unlinked counts as done
+    }
+  }, { onSuccess: () => { setPending(null); refresh(); }, onError: () => setPending(null) });
+
+  const linkedPages = (pages.data ?? []).map((r) => {
+    const lp = (r.landing_page ?? {}) as Row;
+    return { id: idOf(lp.id) || idOf(r.landing_page_id), name: text(lp.name) || `Landing page ${idOf(lp.id) || idOf(r.landing_page_id)}`, status: text(lp.status) };
+  }).filter((p) => p.id);
+  const linkedFlows = (flows.data ?? []).map((r) => ({ linkId: idOf(r.id), workflowId: idOf(r.workflow_id), name: text(r.workflow_name) || `Workflow ${idOf(r.workflow_id)}`, status: text(r.status), role: text(r.role) })).filter((w) => w.linkId);
+  const thisLetters = (letters.data ?? []).filter((n) => idOf(n.campaign_id) === campaignId);
+  const freeLetters = (letters.data ?? []).filter((n) => !idOf(n.campaign_id)).map((n) => ({ id: idOf(n.id), name: text(n.name) || `Newsletter ${idOf(n.id)}` }));
+  const linkedIds = new Set(linkedPages.map((p) => p.id));
+  const pageChoices = allPages.items.map((r) => ({ id: idOf(r.id), name: text(r.name) || `Landing page ${idOf(r.id)}` })).filter((p) => p.id && !linkedIds.has(p.id));
+  const otherLetters = (letters.data ?? []).filter((n) => idOf(n.campaign_id) && idOf(n.campaign_id) !== campaignId).length;
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <SectionCard title="Landing pages" description="Pages visitors land on from this campaign. Unlinking keeps the page.">
+        {pages.error ? <ApiError error={pages.error} title="Could not load landing pages" onRetry={() => void pages.refetch()} /> : !pages.data ? <Skeleton className="h-16 w-full" aria-label="Loading landing pages" /> : linkedPages.length === 0 ? (
+          <EmptyState compact title="No landing page linked" description="Link a page below." />
+        ) : (
+          <ul className="divide-y" aria-label="Linked landing pages">
+            {linkedPages.map((p) => <LinkRow key={p.id} name={p.name} meta={p.status || undefined} onOpen={onOpenLandingPage ? () => onOpenLandingPage(p.id) : undefined} onUnlink={() => setPending({ kind: "page", id: p.id, name: p.name })} busy={unlink.loading} />)}
+          </ul>
+        )}
+        {allPages.error ? <ApiError error={allPages.error} title="Could not load the pages to link" onRetry={allPages.refetch} /> : allPages.loaded ? <LinkPicker label="Link a landing page" options={pageChoices} busy={link.loading} onLink={(id) => void link.mutate({ kind: "page", id })} /> : null}
+        {allPages.truncated ? <p className="pt-1 text-xs text-muted-foreground">Showing the first {allPages.items.length} landing pages.</p> : null}
+      </SectionCard>
+
+      <SectionCard title="Workflows" description="Automations that run for this campaign. Unlinking keeps the workflow.">
+        {flows.error ? <ApiError error={flows.error} title="Could not load workflows" onRetry={() => void flows.refetch()} /> : !flows.data ? <Skeleton className="h-16 w-full" aria-label="Loading workflows" /> : linkedFlows.length === 0 ? (
+          <EmptyState compact title="No workflow linked" />
+        ) : (
+          <ul className="divide-y" aria-label="Linked workflows">
+            {linkedFlows.map((w) => <LinkRow key={w.linkId} name={w.name} meta={[w.role, w.status].filter(Boolean).join(", ") || undefined} onOpen={onOpenWorkflow && w.workflowId ? () => onOpenWorkflow(w.workflowId) : undefined} onUnlink={() => setPending({ kind: "workflow", id: w.linkId, name: w.name })} busy={unlink.loading} />)}
+          </ul>
+        )}
+        <p className="pt-2 text-xs text-muted-foreground">Linking a new workflow to a campaign is not available through the API yet.</p>
+      </SectionCard>
+
+      <SectionCard title="Newsletters" description="A newsletter belongs to one campaign. Unlinking keeps the newsletter.">
+        {letters.error ? <ApiError error={letters.error} title="Could not load newsletters" onRetry={() => void letters.refetch()} /> : !letters.data ? <Skeleton className="h-16 w-full" aria-label="Loading newsletters" /> : (
+          <>
+            {thisLetters.length === 0 ? <EmptyState compact title="No newsletter linked" /> : (
+              <ul className="divide-y" aria-label="Linked newsletters">
+                {thisLetters.map((n) => <LinkRow key={idOf(n.id)} name={text(n.name) || `Newsletter ${idOf(n.id)}`} meta={text(n.status) || undefined} onOpen={onOpenNewsletter ? () => onOpenNewsletter(idOf(n.id)) : undefined} onUnlink={() => setPending({ kind: "newsletter", id: idOf(n.id), name: text(n.name) || `Newsletter ${idOf(n.id)}` })} busy={unlink.loading} />)}
+              </ul>
+            )}
+            <LinkPicker label="Link a newsletter" options={freeLetters} busy={link.loading} onLink={(id) => void link.mutate({ kind: "newsletter", id })} />
+            {otherLetters > 0 ? <p className="pt-1 text-xs text-muted-foreground">{otherLetters} {otherLetters === 1 ? "newsletter belongs" : "newsletters belong"} to other campaigns and {otherLetters === 1 ? "is" : "are"} not listed, because linking would move {otherLetters === 1 ? "it" : "them"}.</p> : null}
+          </>
+        )}
+      </SectionCard>
+
+      {link.error ? <ApiError error={link.error} title="Could not link" onRetry={link.reset} /> : null}
+      {unlink.error ? <ApiError error={unlink.error} title="Could not unlink" onRetry={unlink.reset} /> : null}
+      <ConfirmSpendDialog
+        open={pending !== null}
+        tier="destructive"
+        title={`Unlink "${pending?.name ?? ""}" from this campaign?`}
+        description={pending?.kind === "page" ? "The landing page stays published and keeps its other campaigns. Only the tie to this campaign is removed." : pending?.kind === "workflow" ? "The workflow itself is kept. It stops being part of this campaign." : "The newsletter is kept and keeps sending. It is no longer part of this campaign."}
+        confirmLabel="Unlink"
+        affected={1}
+        confirming={unlink.loading}
+        onCancel={() => setPending(null)}
+        onConfirm={() => { if (pending) void unlink.mutate(pending); }}
+      />
+    </div>
+  );
+}

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

@@ -40,7 +40,7 @@ function Tiles({ data }: { data: Record<string, unknown> }) {
           {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>
+              <dd className="text-xl font-medium">{v}</dd>
             </div>
           ))}
         </dl>

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

@@ -26,6 +26,7 @@
 import { useEffect, useState } 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 { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
@@ -62,8 +63,11 @@ const emptyDraft: Draft = { name: "", category: "Outbound", goal: "", brief: "",
 
 interface Idea { id?: string; campaign_name?: string; campaign_category?: string; core_concept?: string; why_this_works?: string; primary_hook?: string; target_channels?: string[] }
 
+/** The persona API has no paging: a full read is announced under the checkboxes. */
+const PERSONA_LIMIT = 50;
+
 function IdeaStep({ websiteUrl, onPick, onSkip }: { websiteUrl: string; onPick: (i: Idea) => void; onSkip: () => void }) {
-  const personas = useG8Query((signal) => g8Get("/personas", { limit: 50 }, { signal }), []);
+  const personas = useG8Query((signal) => g8Get("/personas", { limit: PERSONA_LIMIT }, { signal }), []);
   const [goal, setGoal] = useState(GOALS[0]);
   const [count, setCount] = useState(5);
   const [direction, setDirection] = useState("");
@@ -104,6 +108,7 @@ function IdeaStep({ websiteUrl, onPick, onSkip }: { websiteUrl: string; onPick:
               <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>
           ))}
+          <FirstNotice shown={personaRows.length} limit={PERSONA_LIMIT} noun="personas" />
         </fieldset>
       ) : null}
       {[start.error, poll.error].map((e, i) => (e ? <ApiError key={i} error={e} title="Idea generation failed" /> : null))}
@@ -111,10 +116,10 @@ function IdeaStep({ websiteUrl, onPick, onSkip }: { websiteUrl: string; onPick:
         <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}
+      {!websiteUrl ? <p className="text-sm text-warning-foreground">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.polling && !poll.done && poll.attempts > 0 && !poll.error ? <p role="status" className="text-sm text-warning-foreground">Still running. Check back in a minute and generate again if nothing appears.</p> : null}
+      {failed ? <p role="alert" className="text-sm text-error-foreground">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) => (
@@ -206,7 +211,7 @@ export function CampaignWizard({ initialCampaignId, websiteUrl, onLaunched, auto
       </nav>
 
       {dispatchFailed ? (
-        <p role="alert" className="rounded bg-amber-50 p-2 text-sm text-amber-900">
+        <p role="alert" className="rounded bg-warning p-2 text-sm text-warning-foreground">
           The campaign was created, but writing its documents could not be started. Write the email copy from the Launch step before launching.
         </p>
       ) : null}

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

@@ -17,6 +17,7 @@ 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";
@@ -48,10 +49,13 @@ 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: 200 }, { signal }), [icpId]);
+  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) => {
@@ -75,7 +79,12 @@ export function IcpDetail({ icpId, onClose, onExpand, onCollapse, onChanged, ren
 
   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 <p className={`p-4 text-sm ${className ?? ""}`}>This ICP no longer exists or was archived.</p>;
+  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));

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";
@@ -108,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>
@@ -136,10 +137,13 @@ const emptyForm: IcpForm = { name: "", description: "", industries: "", size: ""
 
 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, onOpen, className } = props;
   const profile = useCompanyProfile(props.websiteUrl);
-  const icps = useG8Query((signal) => g8Get("/icps", { limit: 100 }, { signal }), [props.refreshKey]);
+  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);
@@ -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>
 

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

@@ -16,6 +16,8 @@ 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 { useAllPages } from "@/g8/hooks/use-all-pages";
+import { hasNextOf } from "@/g8/lib/paging";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { DetailPanel } from "@/g8/components/screen/detail-panel";
 import { FormSheet } from "@/g8/components/screen/form-sheet";
@@ -49,11 +51,18 @@ function isPinned(r: Record<string, unknown> | undefined): boolean {
   return Boolean(r && (r.pinned ?? r.is_pinned));
 }
 
+/** Campaigns per read: every page is read, so no targeting campaign is missed. */
+const CAMPAIGN_PAGE = 100;
+
 export function PersonaDetail({ personaId, onClose, onExpand, onCollapse, onChanged, onOpenCampaign, renderActions, className }: PersonaDetailProps) {
   const [form, setForm] = useState<Form | null>(null);
   const [archiving, setArchiving] = useState(false);
   const q = useG8Query((signal) => g8Get(`/personas/${personaId}`, undefined, { signal }), [personaId]);
-  const campaigns = useG8Query((signal) => g8Get("/campaigns", { page: 1, limit: 100 }, { signal }), [personaId]);
+  const campaigns = useAllPages<CampaignRow>(async (page, signal) => {
+    const env = await g8Get("/campaigns", { page, limit: CAMPAIGN_PAGE }, { signal });
+    const rows = listOf<CampaignRow>(env);
+    return { rows, hasNext: hasNextOf(env, CAMPAIGN_PAGE, rows.length) };
+  }, [personaId]);
   const p = objectOf(q.data) as Record<string, any>;
 
   const save = useG8Mutation(async (f: Form) => {
@@ -79,7 +88,7 @@ export function PersonaDetail({ personaId, onClose, onExpand, onCollapse, onChan
   if (q.loading && !q.data) return <Skeleton className={`h-48 w-full ${className ?? ""}`} />;
 
   const title = text(p.title) || `Persona ${personaId}`;
-  const targeting = listOf<CampaignRow>(campaigns.data).filter((c) => (c.target_persona ?? "").trim().toLowerCase() === title.trim().toLowerCase());
+  const targeting = campaigns.items.filter((c) => (c.target_persona ?? "").trim().toLowerCase() === title.trim().toLowerCase());
   const startEdit = () => {
     save.reset();
     setForm(personaFormOf(p));

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

@@ -19,6 +19,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";
@@ -67,9 +68,12 @@ const emptyForm: PersonaForm = { title: "", why: "", signals: "", approach: "",
 
 const formOf = (p: PersonaRow): PersonaForm => personaFormOf(p as Record<string, any>);
 
+/** The persona API has no paging: a full read is announced under the table. */
+const PERSONA_LIMIT = 100;
+
 export function PersonaEditor({ websiteUrl, onChange, onOpen, refreshKey, className }: PersonaEditorProps) {
   const profile = useCompanyProfile(websiteUrl);
-  const personas = useG8Query((signal) => g8Get("/personas", { limit: 100 }, { signal }), [refreshKey]);
+  const personas = useG8Query((signal) => g8Get("/personas", { limit: PERSONA_LIMIT }, { signal }), [refreshKey]);
   const [editing, setEditing] = useState<PersonaRow | "new" | null>(null);
   const [form, setForm] = useState<PersonaForm>(emptyForm);
   const [archiving, setArchiving] = useState<PersonaRow | null>(null);
@@ -158,6 +162,7 @@ export function PersonaEditor({ websiteUrl, onChange, onOpen, refreshKey, classN
           ))}
         </TableBody>
       </Table>
+      <FirstNotice shown={rows.length} limit={PERSONA_LIMIT} noun="personas" />
       {!personas.loading && !personas.error && rows.length === 0 ? <EmptyState title="No personas yet" description="Add the roles you sell to, or let AI recommend them." /> : null}
 
       <Dialog open={editing !== null} onOpenChange={(o) => { if (!o) setEditing(null); }}>

package/blocks/campaigns/lib/campaigns-utils.ts

@@ -98,10 +98,10 @@ export function commaList(value: string): string[] {
 
 export function statusClass(status: string | null | undefined): string {
   const s = (status ?? "").toLowerCase();
-  if (["active", "live", "completed", "approved", "complete", "done"].includes(s)) return "bg-green-100 text-green-800";
-  if (["draft", "pending", "running", "generating", "in_progress", "copy_in_progress", "scheduling"].includes(s)) return "bg-amber-100 text-amber-800";
-  if (s) return "bg-red-100 text-red-800";
-  return "bg-gray-100 text-gray-700";
+  if (["active", "live", "completed", "approved", "complete", "done"].includes(s)) return "bg-positive text-positive-foreground";
+  if (["draft", "pending", "running", "generating", "in_progress", "copy_in_progress", "scheduling"].includes(s)) return "bg-warning text-warning-foreground";
+  if (s) return "bg-error text-error-foreground";
+  return "bg-muted text-foreground";
 }
 
 /** Timestamps are shown in UTC so the same value reads the same everywhere. */

package/blocks/coach/components/call-scorecard.tsx

@@ -34,7 +34,7 @@ export interface CallScorecardProps {
   className?: string;
 }
 
-const VERDICT_STYLE: Record<string, string> = { met: "text-green-700", partial: "text-amber-600", missed: "text-destructive" };
+const VERDICT_STYLE: Record<string, string> = { met: "text-positive-foreground", partial: "text-warning-foreground", missed: "text-destructive" };
 
 export function CallScorecard({ callId, onDeleted, allowDelete = true, className }: CallScorecardProps) {
   const [audio, setAudio] = useState<{ callId: string; url: string } | null>(null);
@@ -67,13 +67,13 @@ export function CallScorecard({ callId, onDeleted, allowDelete = true, className
     <div className={`flex flex-col gap-4 ${className ?? ""}`}>
       <header className="flex flex-wrap items-start justify-between gap-3">
         <div>
-          <h2 className="text-lg font-semibold">{row.prospect_name || "Practice call"}{row.prospect_company ? ` at ${row.prospect_company}` : ""}</h2>
+          <h2 className="text-lg font-medium">{row.prospect_name || "Practice call"}{row.prospect_company ? ` at ${row.prospect_company}` : ""}</h2>
           <p className="text-sm text-muted-foreground">
             {[row.user_email, row.call_mode, row.call_status, row.duration_ms ? clock(row.duration_ms) : null, row.date_of_call ? new Date(row.date_of_call).toLocaleDateString() : null].filter(Boolean).join(" - ")}
           </p>
         </div>
         <div className="text-right">
-          <div data-testid="overall-score" className="text-3xl font-semibold">{card?.scorePct != null ? `${Math.round(card.scorePct)}%` : "-"}</div>
+          <div data-testid="overall-score" className="text-3xl font-medium">{card?.scorePct != null ? `${Math.round(card.scorePct)}%` : "-"}</div>
           <div className="text-xs text-muted-foreground">{card ? "overall" : "not graded yet"}</div>
         </div>
       </header>
@@ -94,20 +94,20 @@ export function CallScorecard({ callId, onDeleted, allowDelete = true, className
             ))}
           </ul>
           <div className="grid gap-3 sm:grid-cols-2">
-            <div><h3 className="mb-1 text-sm font-semibold">Strengths</h3><ul className="list-disc pl-5 text-sm">{card.strengths.map((t, i) => <li key={i}>{t}</li>)}</ul></div>
-            <div><h3 className="mb-1 text-sm font-semibold">To improve</h3><ul className="list-disc pl-5 text-sm">{card.improvements.map((t, i) => <li key={i}>{t}</li>)}</ul></div>
+            <div><h3 className="mb-1 text-sm font-medium">Strengths</h3><ul className="list-disc pl-5 text-sm">{card.strengths.map((t, i) => <li key={i}>{t}</li>)}</ul></div>
+            <div><h3 className="mb-1 text-sm font-medium">To improve</h3><ul className="list-disc pl-5 text-sm">{card.improvements.map((t, i) => <li key={i}>{t}</li>)}</ul></div>
           </div>
         </>
       )}
 
       <div className="flex flex-col gap-2">
-        <h3 className="text-sm font-semibold">Recording</h3>
+        <h3 className="text-sm font-medium">Recording</h3>
         {row.audio_url ? (shownAudio ? <audio controls src={shownAudio} className="w-full" /> : <div><Button size="sm" variant="outline" loading={loadAudio.loading} onClick={() => void loadAudio.mutate(callId)}>Load recording</Button></div>) : <p className="text-sm text-muted-foreground">No recording.</p>}
         {loadAudio.error ? <ApiError error={loadAudio.error} title="Could not load the recording" /> : null}
       </div>
 
       <div className="flex flex-col gap-2">
-        <h3 className="text-sm font-semibold">Transcript</h3>
+        <h3 className="text-sm font-medium">Transcript</h3>
         {transcript.error ? <ApiError error={transcript.error} title="Could not load the transcript" onRetry={() => void transcript.refetch()} /> : null}
         <ul className="flex max-h-96 flex-col gap-1 overflow-y-auto" data-testid="transcript">
           {segments.map((s, i) => (

package/blocks/company-intelligence/README.md

@@ -0,0 +1,132 @@
+# company-intelligence
+
+Research **your own website** and read what it found: the company profile, competitors, brand news, products, keywords,
+audience questions and brand assets; the wiki documents written from that research; and the six market research reports
+(review sentiment, competitive teardown, voice of customer, GTM channels, analyst and media, buyer psychology). Billable steps
+(a research run, a document rewrite, writing a report) are confirmed with the number of things they touch; deleting and
+resetting are confirmed as destructive.
+
+**What this is not.** The company intelligence API researches the workspace's own website and is locked to it. It has **no
+lookup for other companies**, no technographics, no org chart, no firmographics for a prospect and no AI briefing endpoint (see
+"API gaps"). The screens say so instead of inventing data.
+
+## Screens
+
+`CompanyIntelligenceScreen` (`components/company-intelligence-screen.tsx`) is the finished page. Copy it as your route; no props are required.
+
+```tsx
+import { CompanyIntelligenceScreen } from "@/g8/company-intelligence/components/company-intelligence-screen";
+export default function Page() { return <CompanyIntelligenceScreen />; }
+```
+
+Tabs (`?tab=`): **Overview** (start, follow and reset the research; the company profile), **Sources** (everything collected, and the sources that failed; open one with `?id=<type>` to read it and re-collect it), **Documents** (the wiki documents; `?id=` opens one to read or rewrite), **Reports** (the six reports and their workflow; `?id=` opens one). `&view=full` shows a detail as a full page.
+
+Flows: research the website (confirmed; follows progress step by step), research again (`force`), reset the research (confirmed with the real record count), read each source (profile, competitors, news with sentiment, products, keywords, questions, trends, pages, brand assets), re-collect one source (confirmed), search and filter the wiki documents, read one as formatted text, rewrite one (confirmed), write one report or all six (confirmed with the count), retry a failed report, write the missing ones, stop a run, reset the workflow, read a report, edit its text (changed text only), approve it into the knowledge base and remove it again, read the model's recorded reasoning, write a report again, delete it. Optional props: `toolbarActions`, `renderDetailActions(record)`, `extraDetailTabs` (each `{ id, label, render(record) }`), where `record` is `{ kind: "source" | "document" | "report", id }`.
+
+Parts you can mount alone: `ResearchRun`, `CompanyProfileCard`, `IntelligenceSources`, `SourceDetail`, `SourceView`, `WikiDocuments`, `WikiDocumentDetail`, `ResearchReports`, `ReportDetail`, and the CRM tab below.
+
+### On a CRM company page: `CompanyIntelligenceTab`
+
+```tsx
+<CompaniesScreen
+  extraDetailTabs={[{ id: "intelligence", label: "Intelligence", render: (c) => <CompanyIntelligenceTab company={c} /> }]}
+/>
+```
+
+The stacks that include both `crm` and this block (apollo, zoominfo, clay, 6sense) already mount it. It shows the full profile when the company on screen **is** your workspace's website, the competitor entry your research holds when it is one of the competitors the research found, and otherwise says plainly that there is nothing to show. It never invents data for other companies.
+
+## Install
+
+```
+npx @graph8/sdk add company-intelligence
+```
+
+Installs `foundation` first if missing. Everything lands under `g8/company-intelligence/`. Add `intelligence`, `global-context` and `research-reports` to the proxy allowlist (the installer does this from the block's operations).
+
+## Prerequisites (the human must do these)
+
+| Where | What | How to verify |
+|---|---|---|
+| graph8 key | `knowledge:read`, `knowledge:run`, `knowledge:delete` (research, documents) and `campaigns:read`, `campaigns:write`, `campaigns:run`, `campaigns:delete` (research reports). | `g8.api.me.describeCurrentKey()` |
+| Credits | Research runs, document rewrites and report writing spend credits. The API quotes no price and has no balance read. | The owner knows the balance. |
+| The business | Which website is researched. The first run locks the workspace to it. | `GET /api/v1/intelligence/primary-website` shows `has_website: true`. |
+
+## The flow, in order (IDs passed between steps)
+
+1. **Target**: `getIntelligencePrimaryWebsite` -> `primary_website_url` (null before the first run). If null, `getIntelligenceOrgDomain` -> `company_domain` is only a **suggestion**; a person confirms it.
+2. **Research**: `analyzeWebsite({ website_url, force? })` behind `ConfirmSpendDialog` -> **`task_id`**. A run that finished less than an hour ago is returned as is (no new work, no charge) unless `force` is true. If a primary website is set, any other website answers 400.
+3. **Follow**: `getIntelligenceStatus(task_id)` until `status` is not `pending`/`running`; `steps` has one state per source. `getLatestIntelligenceTask` gives the last `task_id`.
+4. **Read**: `listIntelligenceDocuments` (what was collected), `getIntelligenceData(data_type, { website_url })` (one source, 404 = not collected), `getAllIntelligenceData(website_url)` (all of them, keyed by type; `website_url` here is the host without a scheme).
+5. **Fix one source**: `retryIntelligenceSource({ website_url, data_type })` (billable). The last good data stays if it fails.
+6. **Wiki documents**: `getGlobalContextTreeFlat` (each has `id`, `file_type`, `content`, `status`, `version`, `credits_used`), `getGlobalContextTree` (`stats.total`, `stats.completed`), `generateGlobalContextDocument(file_type, { doc_type, website_url })` (billable, rewrites one document).
+7. **Reports**: `getResearchWorkflowStatus({ website_url })` -> six slots `report_1..report_6` with `id`, `report_number`, `report_type`, `status`. Then `generateResearchReport({ website_url, report_number })`, `generateAllResearchReports`, `resumeResearchWorkflow`, `retryResearchReport({ website_url, report_type })` (all billable), `stopAllResearch`, `resetResearchWorkflow` (destructive). `getResearchReport(id)` has the markdown; `updateResearchReport(id, { markdown_content })`, `approveResearchReport(id)`, `unapproveResearchReport(id)`, `deleteResearchReport(id)`, `getResearchReportThinking(id)` (recorded reasoning).
+
+## Default decisions (do not ask the human unless marked)
+
+| Decision | Default | Ask? |
+|---|---|---|
+| Which website is researched | The primary website once set; the workspace settings' company domain only as a suggestion | **yes** |
+| Run again within the hour | No: the API returns the recent run for free | no |
+| Writing reports | Never automatic; a person confirms the number first | no |
+| Approving a report into the knowledge base | Only when asked (campaigns and the copilot read approved reports) | **yes** |
+| Editing a report | Send only the changed text; clearing it sends `""` | no |
+| Missing data | A dash, never 0, never a guess | no |
+
+## Cost, in plain numbers
+
+The API gives **no price in advance** and no balance read, so no screen shows an invented figure. Each confirm states the quantity
+it can compute from the data on screen, and a real "last time" number when the API reports one.
+
+| Action | Tier | Confirm says |
+|---|---|---|
+| Research the website | billable | Collects the sources of the last run (their count when known); or that a run under an hour old would be returned for free; that the first website becomes locked |
+| Re-collect one source | billable | The one source and the website |
+| Rewrite one wiki document | billable | The document and its version; credits it used last time when the API reports them |
+| Write one report | billable | 1 report |
+| Write all reports | billable | The number of reports, and how many finished ones are written again |
+| Write the missing reports | billable | The count and the titles of the unfinished reports |
+| Retry a failed report | billable | 1 report |
+| Save report text | billable tier (re-indexes into knowledge) | That saving re-indexes the text |
+| Reset the research | destructive | The real number of collected sources it deletes |
+| Reset the report workflow | destructive | The number of reports that have content |
+| Delete a report | destructive | 1 report, and what it used last time when known |
+| Reads, approve, unapprove, stop | none / write | (stop is confirmed too: it cancels paid work in flight) |
+
+## Operation coverage
+
+Used (26): `analyzeWebsite`, `getIntelligenceStatus`, `getLatestIntelligenceTask`, `getIntelligencePrimaryWebsite`, `getIntelligenceOrgDomain`, `listIntelligenceDocuments`, `getIntelligenceData`, `getAllIntelligenceData`, `retryIntelligenceSource`, `resetIntelligence`, `getGlobalContextTree`, `getGlobalContextTreeFlat`, `generateGlobalContextDocument`, `getResearchReportThinking` (the 14 `companyIntelligence` operations, all used), plus from the `research` and `gtmContext` namespaces the report operations they need: `getResearchWorkflowStatus`, `getResearchReport`, `generateResearchReport`, `generateAllResearchReports`, `resumeResearchWorkflow`, `retryResearchReport`, `stopAllResearch`, `resetResearchWorkflow`, `approveResearchReport`, `unapproveResearchReport`, `deleteResearchReport`, `updateResearchReport`.
+
+Skipped on purpose:
+
+| Operation | Why |
+|---|---|
+| `scaffoldResearchReports` | Creates six empty placeholder rows. The Reports tab already shows all six slots from the workflow status, and writing a report creates its row. |
+| `getResearchReportByNumber` | The same report `getResearchReport` returns by id; the workflow status gives every id. |
+| `listResearchReports` (gtmContext) | The workflow status lists the same six reports with their ids and approval state, per website. |
+| `listIntelligenceData` (gtmContext) | The same sources as `listIntelligenceDocuments` / `getAllIntelligenceData`. |
+| `getGlobalContextDocument`, `listGlobalContextDocuments`, `updateGlobalContextDocument`, `deleteDocument`, `deleteAllDocuments`, `regenerateGlobalContext`, `generateAllDocuments`, `resumePipeline`, `stopAllGeneration`, `scaffold*`, `reindexAllDocuments`, `resetStuckDocuments`, pipelines, highlights, analytics, feedback, usage tracking, buying-journey (gtmContext) | Wiki editing and the whole-wiki pipeline belong to the campaigns/GTM context surface, not to company intelligence. This block reads and rewrites one document at a time. |
+
+## API gaps (what was asked for and the API does not have)
+
+| Asked for | Reality | What the block does |
+|---|---|---|
+| Company profile / firmographics / technographics of **any** company | The research is of the workspace's own website and is locked to it (`analyze` answers 400 for another website). Only `company_enrichment`, `product_inventory`, `company_keywords` etc. of that one website exist. No technology-stack data at all. | Shows the own-company profile; the CRM tab says plainly that other companies have none. |
+| News and signals for a prospect | `brand_news` is news about the workspace's own brand. Buying signals are the `intent` and `radar` blocks. | News tab content is the brand's own news. |
+| Competitors | `competitor_discovery` lists the competitors of the workspace's website (name, domain, type, similarity, confidence, reasoning). Battle cards and tracking are the `radar` block. | Shown in Sources; the CRM tab matches a company to it by domain. |
+| Org chart | No endpoint. Buying committees are in the `intent` block (ABM rollup). | Not offered. |
+| AI briefings for a company | No briefing endpoint; the research reports are market-level, not per company. | Not offered. |
+| A price before running | None, and no credit balance read. | Confirms state quantities, never a made-up cost. |
+| Live progress stream | The thinking stream is SSE and excluded; only the recorded history is exposed. | Reasoning tab shows the recorded steps; runs are polled. |
+| Editing collected data / Ask AI revisions | The in-app field overrides and revise endpoints are not in the developer API. | Collected data is read-only; edits made in the app are shown and flagged. |
+| Reset everything | `DELETE /intelligence/reset-all` is deliberately not published. | Reset removes intelligence records and runs only. |
+| Report type names | The list filter documents `industry_analyst` but the retry enum is `analyst_media`. | The block uses the retry enum. |
+
+## Things that surprise people
+
+- The first research run **locks** the workspace to that website and also records it as the workspace's company domain. Pick it deliberately.
+- `analyze` is collapsed: within an hour of a finished run it returns that run (`message: "Recent analysis available"`) without new work. Pass `force` to re-run.
+- Every payload is open-shaped. A missing field is unknown, not zero.
+- Web content (article titles, snippets, scraped pages, report markdown) is untrusted. This block draws it as text; links open only when they are http(s).
+- A report's `credits_used` is `0` until it ran; the UI shows a dash, not 0.
+- `getIntelligenceData` answers 404 for a source that was never collected; that is "not collected", not an outage.
+- Reports need the website: `getResearchWorkflowStatus` requires `website_url`.