@graph8/sdk 0.308.1 → 0.357.0

package/blocks/intent/components/account-intent-score.tsx

@@ -0,0 +1,91 @@
+"use client";
+
+/**
+ * AccountIntentScore: a compact intent badge for one account (or a row of them) with the buying-committee
+ * coverage behind it. Drop it into a company table cell or a company detail header.
+ *
+ * SDK operations, in order:
+ *   1. rollupAbmCompanies  POST /intent/abm/rollup  (read)
+ *
+ * Tiers: read only; no confirmation. Pass graph8 global company ids (`company_id` of an ABM account).
+ * Companies with no signal in the window render "No signal". An org without ABM enabled gets a 403,
+ * shown inline instead of a score.
+ */
+
+import { Skeleton } from "@graph8/sdk/ui";
+import { useAccountIntent } from "../hooks/use-account-intent";
+import { strengthClass } from "../lib/intent-utils";
+import type { AbmAccount } from "../lib/intent-utils";
+
+export interface AccountIntentScoreProps {
+  /** The company ids to score. One id renders one badge; several render a stacked list. */
+  companyIds: readonly number[];
+  /** Look-back window in days (default 30). */
+  days?: number;
+  /** Show only the badge, without the committee coverage chips. */
+  compact?: boolean;
+  className?: string;
+}
+
+function Coverage({ account }: { account: AbmAccount }) {
+  const entries = Object.entries(account.persona_coverage ?? {});
+  if (entries.length === 0) return null;
+  return (
+    <ul className="mt-1 flex flex-wrap gap-1" aria-label="Buying committee coverage">
+      {entries.map(([category, cov]) => (
+        <li
+          key={category}
+          title={`${cov.contact_count ?? 0} contacts, ${cov.signal_count ?? 0} signals`}
+          className="rounded border border-gray-200 px-1.5 py-0.5 text-xs text-gray-700"
+        >
+          {category}: {cov.barometer ?? "none"}
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Badge({ account, compact }: { account: AbmAccount; compact?: boolean }) {
+  const label = account.account_strength ?? "unscored";
+  return (
+    <div data-testid={`intent-score-${account.company_id}`}>
+      <div className="flex items-center gap-2">
+        <span className={`rounded px-2 py-0.5 text-xs font-medium ${strengthClass(account.account_strength)}`}>{label}</span>
+        {account.is_high_intent ? (
+          <span className="rounded bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">High intent</span>
+        ) : null}
+        <span className="text-xs text-gray-500">{account.total_signal_count ?? 0} signals</span>
+      </div>
+      {compact ? null : <Coverage account={account} />}
+    </div>
+  );
+}
+
+export function AccountIntentScore({ companyIds, days = 30, compact, className }: AccountIntentScoreProps) {
+  const { rollups, loading, error } = useAccountIntent(companyIds, days);
+
+  if (loading) return <Skeleton className={`h-5 w-32 ${className ?? ""}`} />;
+  if (error) {
+    const status = (error as { status?: number }).status;
+    const text = status === 403 ? "Intent scoring is not enabled for this workspace." : "Could not load intent.";
+    return (
+      <span role="alert" className={`text-xs text-red-700 ${className ?? ""}`}>
+        {text}
+      </span>
+    );
+  }
+  return (
+    <div className={`space-y-2 ${className ?? ""}`}>
+      {[...new Set(companyIds)].map((id) => {
+        const account = rollups[String(id)];
+        return account ? (
+          <Badge key={id} account={{ ...account, company_id: id }} compact={compact} />
+        ) : (
+          <span key={id} className="block text-xs text-gray-500">
+            No signal
+          </span>
+        );
+      })}
+    </div>
+  );
+}

package/blocks/intent/components/intent-feed.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+/**
+ * IntentFeed: accounts showing buying intent, strongest first, with a "who visited this URL" lookup.
+ * A feed, not a stream: the API has no push channel, so it reloads on demand and optionally on a timer.
+ *
+ * SDK operations, in order:
+ *   1. listAbmCompanies  GET  /intent/abm/companies  (read; days, keyword_ids, page, limit)
+ *   2. urlCompanies      POST /intent/url-companies  (read; only when the person looks up a URL)
+ *
+ * Tiers: both read, so no confirmation dialog. The ABM feed needs the ABM feature on for the org; a 403 is
+ * explained inline. `onSelectAccount` hands the row to your app (open a company page, add to a list...).
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@graph8/sdk/ui";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { formatDate, rowsOf, strengthClass, totalOf } from "../lib/intent-utils";
+import type { AbmAccount } from "../lib/intent-utils";
+
+export interface IntentFeedProps {
+  /** Look-back window in days. Default 30. */
+  days?: number;
+  /** Restrict the feed to these tracked keywords (ids from IntentKeywordManager). */
+  keywordIds?: readonly string[];
+  pageSize?: number;
+  /** Reload every N seconds (0 or undefined: only when the person clicks Refresh). */
+  refreshSeconds?: number;
+  onSelectAccount?: (account: AbmAccount) => void;
+  className?: string;
+}
+
+interface UrlCompany {
+  company_id: number | null;
+  name: string | null;
+  domain: string | null;
+  industry: string | null;
+  visit_count: number;
+  contacts_seen: number;
+  last_seen: string | null;
+}
+
+function UrlLookup() {
+  const [url, setUrl] = useState("");
+  const [submitted, setSubmitted] = useState<string | null>(null);
+  const result = useG8Query(
+    async (signal) => {
+      const res = await g8Post<unknown>("/intent/url-companies", { url: submitted, days: 30, limit: 25 }, { signal });
+      // This route answers with a bare aggregate rather than the { data } envelope.
+      const body = res as unknown as { companies?: UrlCompany[]; data?: { companies?: UrlCompany[] } };
+      return body.companies ?? body.data?.companies ?? [];
+    },
+    [submitted],
+    { enabled: submitted != null },
+  );
+  return (
+    <section aria-label="URL lookup" className="rounded border border-gray-200 p-3">
+      <form
+        className="flex gap-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (url.trim()) setSubmitted(url.trim());
+        }}
+      >
+        <Input aria-label="Page URL" placeholder="https://competitor.com/pricing" value={url} onChange={(e) => setUrl(e.target.value)} />
+        <Button type="submit" variant="outline">
+          Who visited?
+        </Button>
+      </form>
+      {result.loading ? <Skeleton className="mt-3 h-8 w-full" /> : null}
+      {result.error ? <ApiError error={result.error} onRetry={() => void result.refetch()} /> : null}
+      {submitted && !result.loading && !result.error ? (
+        (result.data ?? []).length === 0 ? (
+          <p className="mt-3 text-sm text-gray-500">No identified companies visited this URL in the last 30 days.</p>
+        ) : (
+          <ul className="mt-3 divide-y text-sm">
+            {(result.data ?? []).map((c) => (
+              <li key={`${c.company_id}-${c.domain}`} className="flex justify-between py-1.5">
+                <span>{c.name ?? c.domain}</span>
+                <span className="text-gray-500">
+                  {c.visit_count} visits, {c.contacts_seen} people
+                </span>
+              </li>
+            ))}
+          </ul>
+        )
+      ) : null}
+    </section>
+  );
+}
+
+export function IntentFeed({ days = 30, keywordIds, pageSize = 25, refreshSeconds, onSelectAccount, className }: IntentFeedProps) {
+  const [highOnly, setHighOnly] = useState(false);
+  const keywordKey = (keywordIds ?? []).join(",");
+  // The page belongs to one set of inputs: when days, keywords or page size change, start again at page 1.
+  const scope = `${days}|${pageSize}|${keywordKey}`;
+  const [pageState, setPageState] = useState({ scope, n: 1 });
+  const page = pageState.scope === scope ? pageState.n : 1;
+  const setPage = (update: (p: number) => number) => setPageState({ scope, n: update(page) });
+  const feed = useG8Query(
+    (signal) => g8Get("/intent/abm/companies", { days, page, limit: pageSize, keyword_ids: keywordKey || undefined }, { signal }),
+    [days, page, pageSize, keywordKey],
+  );
+
+  useEffect(() => {
+    if (!refreshSeconds) return;
+    const timer = setInterval(() => void feed.refetch(), refreshSeconds * 1000);
+    return () => clearInterval(timer);
+  }, [refreshSeconds, feed.refetch]);
+
+  const rawAccounts = rowsOf<AbmAccount>(feed.data);
+  const accounts = rawAccounts.filter((a) => !highOnly || a.is_high_intent);
+  const total = totalOf(feed.data);
+  const status = (feed.error as { status?: number } | undefined)?.status;
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <div className="flex items-center justify-between">
+        <label className="flex items-center gap-2 text-sm">
+          <input type="checkbox" checked={highOnly} onChange={(e) => setHighOnly(e.target.checked)} />
+          High intent only
+        </label>
+        <Button variant="outline" size="sm" onClick={() => void feed.refetch()} disabled={feed.loading}>
+          Refresh
+        </Button>
+      </div>
+
+      {feed.error && status === 403 ? (
+        <p role="alert" className="rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">
+          Account intent is not enabled for this workspace. Ask graph8 to switch on ABM intent.
+        </p>
+      ) : feed.error ? (
+        <ApiError error={feed.error} onRetry={() => void feed.refetch()} />
+      ) : feed.loading && !feed.data ? (
+        <div className="space-y-2">
+          <Skeleton className="h-9 w-full" />
+          <Skeleton className="h-9 w-full" />
+        </div>
+      ) : accounts.length === 0 ? (
+        <EmptyState
+          title="No accounts showing intent"
+          description="Track a keyword or a competitor domain first. Accounts appear here as their people visit the pages you track."
+        />
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Account</TableHead>
+              <TableHead>Strength</TableHead>
+              <TableHead>Signals</TableHead>
+              <TableHead>Top keywords</TableHead>
+              <TableHead>Last signal</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {accounts.map((a) => (
+              <TableRow
+                key={String(a.global_company_id ?? a.company_id ?? a.company_domain)}
+                className={onSelectAccount ? "cursor-pointer" : undefined}
+                onClick={() => onSelectAccount?.(a)}
+              >
+                <TableCell>
+                  <div className="font-medium">{a.company_name ?? a.company_domain ?? "Unknown company"}</div>
+                  <div className="text-xs text-gray-500">{a.company_domain}</div>
+                </TableCell>
+                <TableCell>
+                  <span className={`rounded px-2 py-0.5 text-xs ${strengthClass(a.account_strength)}`}>{a.account_strength ?? "-"}</span>
+                  {a.is_high_intent ? <span className="ml-1 text-xs font-medium text-red-700">High intent</span> : null}
+                </TableCell>
+                <TableCell>
+                  {a.total_signal_count ?? 0}
+                  {typeof a.trend_pct === "number" ? (
+                    <span className="ml-1 text-xs text-gray-500">
+                      ({a.trend_pct > 0 ? "+" : ""}
+                      {Math.round(a.trend_pct)}%)
+                    </span>
+                  ) : null}
+                </TableCell>
+                <TableCell className="text-sm">
+                  {(a.top_keywords ?? [])
+                    .slice(0, 3)
+                    .map((k) => k.keyword)
+                    .join(", ") || "-"}
+                </TableCell>
+                <TableCell>{formatDate(a.latest_signal_date)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      )}
+
+      <div className="flex items-center justify-between text-sm text-gray-600">
+        <span>{total != null ? `${total.toLocaleString()} accounts` : ""}</span>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" disabled={page <= 1 || feed.loading} onClick={() => setPage((p) => p - 1)}>
+            Previous
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={feed.loading || rawAccounts.length < pageSize}
+            onClick={() => setPage((p) => p + 1)}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+
+      <UrlLookup />
+    </div>
+  );
+}

package/blocks/intent/components/intent-keyword-manager.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+/**
+ * IntentKeywordManager: the keywords and competitor domains whose web traffic you track, with the
+ * companies that showed interest in each.
+ *
+ * SDK operations, in order:
+ *   1. keywordsList            POST   /intent/keywords/list                      (billable tier)
+ *   2. keywordsAdd             POST   /intent/keywords/add                       (billable)
+ *   3. keywordsCreateFromDomain POST  /intent/keywords/create-from-domain        (billable; dry_run first)
+ *   4. keywordCompanies        POST   /intent/keywords/{keyword_id}/companies    (billable)
+ *   5. keywordsDelete          DELETE /intent/keywords/{keyword_id}              (destructive)
+ *
+ * Tiers: every call here is billable or destructive in the contract, so EVERY one opens ConfirmSpendDialog
+ * first, including the listing (set `confirmListing={false}` once you have checked that your plan does not
+ * charge for it; then the list loads on mount). Domain tracking previews with `dry_run` before it saves.
+ * Ids passed between steps: the `id` of a listed keyword feeds steps 4 and 5; the `keyword_id` from step 3
+ * is the new row.
+ */
+
+import { useEffect, useState } from "react";
+import { Button, Input, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Textarea } from "@graph8/sdk/ui";
+import { g8Delete, g8Post } from "@/g8/lib/g8-client";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import type { ConfirmTier } from "@/g8/components/confirm-spend-dialog";
+import { EmptyState } from "@/g8/components/empty-state";
+import { rowsOf } from "../lib/intent-utils";
+import type { IntentKeywordRow } from "../lib/intent-utils";
+
+export interface IntentKeywordManagerProps {
+  /** Ask before listing (the list is billable in the contract). Default true. */
+  confirmListing?: boolean;
+  pageSize?: number;
+  onSelectKeyword?: (keyword: IntentKeywordRow) => void;
+  className?: string;
+}
+
+type Pending =
+  | { kind: "list" }
+  | { kind: "add"; keywords: string[] }
+  | { kind: "preview"; domain: string }
+  | { kind: "track"; domain: string }
+  | { kind: "companies"; keyword: IntentKeywordRow }
+  | { kind: "delete"; keyword: IntentKeywordRow };
+
+interface DomainResult {
+  keyword?: string;
+  keyword_id?: string | null;
+  dry_run?: boolean;
+  pages_seeded?: number;
+  contacts_seeded?: number;
+  companies_seeded?: number;
+  message?: string;
+}
+
+interface CompanyRow {
+  name?: string | null;
+  company_name?: string | null;
+  COMPANY_NAME?: string | null;
+  domain?: string | null;
+  company_domain?: string | null;
+  COMPANY_DOMAIN?: string | null;
+}
+
+function describe(p: Pending): { tier: ConfirmTier; title: string; description: string; confirmLabel: string } {
+  switch (p.kind) {
+    case "list":
+      return {
+        tier: "billable",
+        title: "Load tracked keywords",
+        description: "Listing tracked keywords is classified billable by the API.",
+        confirmLabel: "Load keywords",
+      };
+    case "add":
+      return {
+        tier: "billable",
+        title: `Track ${p.keywords.length} keyword${p.keywords.length === 1 ? "" : "s"}`,
+        description: p.keywords.join(", "),
+        confirmLabel: "Track keywords",
+      };
+    case "preview":
+      return {
+        tier: "billable",
+        title: `Preview tracking ${p.domain}`,
+        description: "Finds the pages and people on this domain without saving anything.",
+        confirmLabel: "Run preview",
+      };
+    case "track":
+      return {
+        tier: "billable",
+        title: `Track ${p.domain}`,
+        description: "Saves the domain as a tracked keyword and resolves the people who visit its pages.",
+        confirmLabel: "Track domain",
+      };
+    case "companies":
+      return {
+        tier: "billable",
+        title: `Load companies for "${p.keyword.keyword}"`,
+        description: "Resolves the companies behind this keyword's traffic.",
+        confirmLabel: "Load companies",
+      };
+    case "delete":
+      return {
+        tier: "destructive",
+        title: `Stop tracking "${p.keyword.keyword}"`,
+        description: "The keyword is removed. Companies already saved to lists stay.",
+        confirmLabel: "Stop tracking",
+      };
+  }
+}
+
+const companyName = (c: CompanyRow) =>
+  c.name ?? c.company_name ?? c.COMPANY_NAME ?? c.domain ?? c.company_domain ?? c.COMPANY_DOMAIN ?? "Unknown";
+
+export function IntentKeywordManager({ confirmListing = true, pageSize = 50, onSelectKeyword, className }: IntentKeywordManagerProps) {
+  const [rows, setRows] = useState<IntentKeywordRow[] | null>(null);
+  const [pending, setPending] = useState<Pending | null>(null);
+  const [keywordText, setKeywordText] = useState("");
+  const [domain, setDomain] = useState("");
+  const [domainResult, setDomainResult] = useState<DomainResult | null>(null);
+  const [previewed, setPreviewed] = useState<string | null>(null);
+  const [companies, setCompanies] = useState<{ keyword: string; rows: CompanyRow[] } | null>(null);
+
+  const run = useG8Mutation(async (p: Pending) => {
+    switch (p.kind) {
+      case "list":
+        setRows(rowsOf<IntentKeywordRow>(await g8Post("/intent/keywords/list", { page: 1, limit: pageSize })));
+        break;
+      case "add":
+        {
+          const res = await g8Post<{ created?: Array<{ id: string; keyword: string }> }>("/intent/keywords/add", { keywords: p.keywords });
+          setKeywordText("");
+          // Add the new rows locally. Reloading would be a second billable call the person did not confirm.
+          const created = (res.data?.created ?? []).map((k): IntentKeywordRow => ({ id: k.id, keyword: k.keyword }));
+          setRows((prev) => (prev == null ? prev : [...created, ...prev]));
+        }
+        break;
+      case "preview":
+      case "track": {
+        const res = await g8Post<DomainResult>("/intent/keywords/create-from-domain", { domain: p.domain, dry_run: p.kind === "preview" });
+        setDomainResult(res.data);
+        setPreviewed(p.kind === "preview" ? p.domain : null);
+        if (p.kind === "track" && res.data?.keyword_id) {
+          const added: IntentKeywordRow = {
+            id: res.data.keyword_id,
+            keyword: res.data.keyword ?? p.domain,
+            total_resolved_companies: res.data.companies_seeded,
+            total_resolved_contacts: res.data.contacts_seeded,
+          };
+          setRows((prev) => [added, ...(prev ?? [])]);
+        }
+        break;
+      }
+      case "companies":
+        setCompanies({
+          keyword: p.keyword.keyword,
+          rows: rowsOf<CompanyRow>(await g8Post(`/intent/keywords/${p.keyword.id}/companies`, { limit: 50, page: 1 })),
+        });
+        break;
+      case "delete":
+        await g8Delete(`/intent/keywords/${p.keyword.id}`);
+        setRows((prev) => (prev ?? []).filter((k) => k.id !== p.keyword.id));
+        setCompanies((c) => (c?.keyword === p.keyword.keyword ? null : c));
+        break;
+    }
+  });
+
+  useEffect(() => {
+    if (!confirmListing) void run.mutate({ kind: "list" });
+    // Load once on mount when listing needs no confirmation.
+  }, [confirmListing]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const confirm = pending ? describe(pending) : null;
+  const words = keywordText
+    .split(/[\n,]/)
+    .map((w) => w.trim())
+    .filter(Boolean);
+
+  return (
+    <div className={`space-y-4 ${className ?? ""}`}>
+      <div className="grid gap-3 md:grid-cols-2">
+        <section className="space-y-2 rounded border border-gray-200 p-3">
+          <h3 className="text-sm font-semibold">Track keywords</h3>
+          <Textarea
+            aria-label="Keywords"
+            rows={3}
+            placeholder="one keyword per line, or comma separated"
+            value={keywordText}
+            onChange={(e) => setKeywordText(e.target.value)}
+          />
+          <Button size="sm" disabled={words.length === 0} onClick={() => setPending({ kind: "add", keywords: words })}>
+            Track keywords
+          </Button>
+        </section>
+        <section className="space-y-2 rounded border border-gray-200 p-3">
+          <h3 className="text-sm font-semibold">Track a competitor domain</h3>
+          <Input
+            aria-label="Competitor domain"
+            placeholder="competitor.com"
+            value={domain}
+            onChange={(e) => {
+              setDomain(e.target.value);
+              setDomainResult(null);
+              setPreviewed(null);
+            }}
+          />
+          <div className="flex gap-2">
+            <Button
+              size="sm"
+              variant="outline"
+              disabled={domain.trim().length < 3}
+              onClick={() => setPending({ kind: "preview", domain: domain.trim() })}
+            >
+              Preview
+            </Button>
+            <Button
+              size="sm"
+              disabled={domain.trim().length < 3 || !domainResult?.dry_run || previewed !== domain.trim()}
+              onClick={() => setPending({ kind: "track", domain: domain.trim() })}
+            >
+              Track domain
+            </Button>
+          </div>
+          {domainResult ? (
+            <p className="text-xs text-gray-600" role="status">
+              {domainResult.dry_run ? "Preview: " : "Saved: "}
+              {domainResult.pages_seeded ?? 0} pages, {domainResult.contacts_seeded ?? 0} people, {domainResult.companies_seeded ?? 0}{" "}
+              companies. {domainResult.message}
+            </p>
+          ) : null}
+        </section>
+      </div>
+
+      {run.error ? <ApiError error={run.error} onRetry={run.reset} /> : null}
+
+      {rows == null ? (
+        run.loading ? (
+          <Skeleton className="h-24 w-full" />
+        ) : (
+          <EmptyState
+            title="Tracked keywords are not loaded"
+            description="Load them to see which keywords and domains you track."
+            action={<Button onClick={() => setPending({ kind: "list" })}>Load keywords</Button>}
+          />
+        )
+      ) : rows.length === 0 ? (
+        <EmptyState
+          title="No tracked keywords yet"
+          description="Add a keyword or a competitor domain above. Accounts that visit the matching pages show up in the intent feed."
+        />
+      ) : (
+        <>
+          <div className="flex justify-end">
+            <Button size="sm" variant="outline" onClick={() => setPending({ kind: "list" })}>
+              Reload
+            </Button>
+          </div>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Keyword</TableHead>
+                <TableHead>Companies</TableHead>
+                <TableHead>People</TableHead>
+                <TableHead />
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {rows.map((k) => (
+                <TableRow key={k.id}>
+                  <TableCell>
+                    <button type="button" className="font-medium underline-offset-2 hover:underline" onClick={() => onSelectKeyword?.(k)}>
+                      {k.keyword}
+                    </button>
+                  </TableCell>
+                  <TableCell>{k.total_resolved_companies ?? 0}</TableCell>
+                  <TableCell>{k.total_resolved_contacts ?? 0}</TableCell>
+                  <TableCell className="space-x-2 text-right">
+                    <Button size="sm" variant="ghost" onClick={() => setPending({ kind: "companies", keyword: k })}>
+                      Companies
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      aria-label={`Stop tracking ${k.keyword}`}
+                      onClick={() => setPending({ kind: "delete", keyword: k })}
+                    >
+                      Remove
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </>
+      )}
+
+      {companies ? (
+        <section className="rounded border border-gray-200 p-3" aria-label="Keyword companies">
+          <h3 className="text-sm font-semibold">Companies interested in "{companies.keyword}"</h3>
+          {companies.rows.length === 0 ? (
+            <p className="mt-2 text-sm text-gray-500">No resolved companies yet.</p>
+          ) : (
+            <ul className="mt-2 grid gap-1 text-sm md:grid-cols-2">
+              {companies.rows.map((c, i) => (
+                <li key={i}>{companyName(c)}</li>
+              ))}
+            </ul>
+          )}
+        </section>
+      ) : null}
+
+      {confirm && pending ? (
+        <ConfirmSpendDialog
+          open
+          tier={confirm.tier}
+          title={confirm.title}
+          description={confirm.description}
+          confirmLabel={confirm.confirmLabel}
+          confirming={run.loading}
+          onCancel={() => setPending(null)}
+          onConfirm={() => {
+            const action = pending;
+            void run.mutate(action).then(() => setPending(null));
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}

package/blocks/intent/hooks/use-account-intent.ts

@@ -0,0 +1,46 @@
+"use client";
+
+/**
+ * useAccountIntent: the ABM intent rollup for a set of companies, ready to drop into a table column.
+ *
+ * SDK operations, in order:
+ *   1. rollupAbmCompanies  POST /intent/abm/rollup   (read; up to 500 company ids per call)
+ *
+ * Tiers: read only, so no confirmation is needed. The ids are graph8's global COMPANY_IDs (the
+ * `company_id` of an ABM account), not your CRM row ids. The org needs the ABM feature on (403 otherwise).
+ */
+
+import { useMemo } from "react";
+import { g8Post } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { rollupsOf } from "../lib/intent-utils";
+import type { AbmAccount } from "../lib/intent-utils";
+
+const MAX_IDS = 500;
+
+export interface UseAccountIntentResult {
+  /** Rollup per company id (as a string key). Companies with no signal are simply absent. */
+  rollups: Record<string, AbmAccount>;
+  loading: boolean;
+  error: unknown;
+  refetch: () => Promise<Record<string, AbmAccount> | undefined>;
+}
+
+export function useAccountIntent(companyIds: readonly number[], days = 30): UseAccountIntentResult {
+  const ids = useMemo(() => [...new Set(companyIds)], [companyIds]);
+  const key = ids.join(",");
+  const query = useG8Query(
+    async (signal) => {
+      // The API takes at most 500 ids per call: send every chunk, so no id is silently left unscored.
+      const chunks: number[][] = [];
+      for (let i = 0; i < ids.length; i += MAX_IDS) chunks.push(ids.slice(i, i + MAX_IDS));
+      const parts = await Promise.all(
+        chunks.map(async (chunk) => rollupsOf(await g8Post("/intent/abm/rollup", { company_ids: chunk, days }, { signal }))),
+      );
+      return Object.assign({}, ...parts) as Record<string, AbmAccount>;
+    },
+    [key, days],
+    { enabled: ids.length > 0 },
+  );
+  return { rollups: query.data ?? {}, loading: query.loading, error: query.error, refetch: query.refetch };
+}