@graph8/sdk 0.362.0 → 0.373.0

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

@@ -20,6 +20,8 @@ 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";
+import { rowActivationProps } from "@/g8/hooks/use-row-activation";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface IntentFeedProps {
   /** Look-back window in days. Default 30. */
@@ -57,7 +59,7 @@ function UrlLookup() {
     { enabled: submitted != null },
   );
   return (
-    <section aria-label="URL lookup" className="rounded border border-gray-200 p-3">
+    <section aria-label="URL lookup" className="rounded border border-border p-3">
       <form
         className="flex gap-2"
         onSubmit={(e) => {
@@ -74,13 +76,13 @@ function UrlLookup() {
       {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>
+          <p className="mt-3 text-sm text-muted-foreground">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">
+                <span className="text-muted-foreground">
                   {c.visit_count} visits, {c.contacts_seen} people
                 </span>
               </li>
@@ -93,6 +95,7 @@ function UrlLookup() {
 }
 
 export function IntentFeed({ days = 30, keywordIds, pageSize = 25, refreshSeconds, onSelectAccount, className }: IntentFeedProps) {
+  const brand = useBrand();
   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.
@@ -129,8 +132,8 @@ export function IntentFeed({ days = 30, keywordIds, pageSize = 25, refreshSecond
       </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 role="alert" className="rounded border border-warning-foreground/25 bg-warning p-3 text-sm text-warning-foreground">
+          Account intent is not enabled for this workspace. Ask {brand.linkLabel} to switch on ABM intent.
         </p>
       ) : feed.error ? (
         <ApiError error={feed.error} onRetry={() => void feed.refetch()} />
@@ -160,20 +163,20 @@ export function IntentFeed({ days = 30, keywordIds, pageSize = 25, refreshSecond
               <TableRow
                 key={String(a.global_company_id ?? a.company_id ?? a.company_domain)}
                 className={onSelectAccount ? "cursor-pointer" : undefined}
-                onClick={() => onSelectAccount?.(a)}
+                {...(onSelectAccount ? rowActivationProps(() => 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>
+                  <div className="text-xs text-muted-foreground">{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}
+                  {a.is_high_intent ? <span className="ml-1 text-xs font-medium text-error-foreground">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">
+                    <span className="ml-1 text-xs text-muted-foreground">
                       ({a.trend_pct > 0 ? "+" : ""}
                       {Math.round(a.trend_pct)}%)
                     </span>
@@ -192,7 +195,7 @@ export function IntentFeed({ days = 30, keywordIds, pageSize = 25, refreshSecond
         </Table>
       )}
 
-      <div className="flex items-center justify-between text-sm text-gray-600">
+      <div className="flex items-center justify-between text-sm text-muted-foreground">
         <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)}>

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

@@ -28,12 +28,15 @@ 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";
+import { plural } from "@/g8/lib/plural";
 
 export interface IntentKeywordManagerProps {
   /** Ask before listing (the list is billable in the contract). Default true. */
   confirmListing?: boolean;
   pageSize?: number;
   onSelectKeyword?: (keyword: IntentKeywordRow) => void;
+  /** Keyword ids to hide (for example one that was just removed from its detail screen). */
+  hiddenIds?: readonly string[];
   className?: string;
 }
 
@@ -76,7 +79,7 @@ function describe(p: Pending): { tier: ConfirmTier; title: string; description:
     case "add":
       return {
         tier: "billable",
-        title: `Track ${p.keywords.length} keyword${p.keywords.length === 1 ? "" : "s"}`,
+        title: `Track ${plural(p.keywords.length, "keyword")}`,
         description: p.keywords.join(", "),
         confirmLabel: "Track keywords",
       };
@@ -114,7 +117,7 @@ function describe(p: Pending): { tier: ConfirmTier; title: string; description:
 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) {
+export function IntentKeywordManager({ confirmListing = true, pageSize = 50, onSelectKeyword, hiddenIds, className }: IntentKeywordManagerProps) {
   const [rows, setRows] = useState<IntentKeywordRow[] | null>(null);
   const [pending, setPending] = useState<Pending | null>(null);
   const [keywordText, setKeywordText] = useState("");
@@ -172,6 +175,7 @@ export function IntentKeywordManager({ confirmListing = true, pageSize = 50, onS
     // Load once on mount when listing needs no confirmation.
   }, [confirmListing]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  const visibleRows = rows == null ? null : rows.filter((k) => !(hiddenIds ?? []).includes(k.id));
   const confirm = pending ? describe(pending) : null;
   const words = keywordText
     .split(/[\n,]/)
@@ -181,8 +185,8 @@ export function IntentKeywordManager({ confirmListing = true, pageSize = 50, onS
   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>
+        <section className="space-y-2 rounded border border-border p-3">
+          <h3 className="text-sm font-medium">Track keywords</h3>
           <Textarea
             aria-label="Keywords"
             rows={3}
@@ -194,8 +198,8 @@ export function IntentKeywordManager({ confirmListing = true, pageSize = 50, onS
             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>
+        <section className="space-y-2 rounded border border-border p-3">
+          <h3 className="text-sm font-medium">Track a competitor domain</h3>
           <Input
             aria-label="Competitor domain"
             placeholder="competitor.com"
@@ -224,7 +228,7 @@ export function IntentKeywordManager({ confirmListing = true, pageSize = 50, onS
             </Button>
           </div>
           {domainResult ? (
-            <p className="text-xs text-gray-600" role="status">
+            <p className="text-xs text-muted-foreground" role="status">
               {domainResult.dry_run ? "Preview: " : "Saved: "}
               {domainResult.pages_seeded ?? 0} pages, {domainResult.contacts_seeded ?? 0} people, {domainResult.companies_seeded ?? 0}{" "}
               companies. {domainResult.message}
@@ -245,7 +249,7 @@ export function IntentKeywordManager({ confirmListing = true, pageSize = 50, onS
             action={<Button onClick={() => setPending({ kind: "list" })}>Load keywords</Button>}
           />
         )
-      ) : rows.length === 0 ? (
+      ) : (visibleRows ?? []).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."
@@ -267,7 +271,7 @@ export function IntentKeywordManager({ confirmListing = true, pageSize = 50, onS
               </TableRow>
             </TableHeader>
             <TableBody>
-              {rows.map((k) => (
+              {(visibleRows ?? []).map((k) => (
                 <TableRow key={k.id}>
                   <TableCell>
                     <button type="button" className="font-medium underline-offset-2 hover:underline" onClick={() => onSelectKeyword?.(k)}>
@@ -297,10 +301,10 @@ export function IntentKeywordManager({ confirmListing = true, pageSize = 50, onS
       )}
 
       {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>
+        <section className="rounded border border-border p-3" aria-label="Keyword companies">
+          <h3 className="text-sm font-medium">Companies interested in "{companies.keyword}"</h3>
           {companies.rows.length === 0 ? (
-            <p className="mt-2 text-sm text-gray-500">No resolved companies yet.</p>
+            <p className="mt-2 text-sm text-muted-foreground">No resolved companies yet.</p>
           ) : (
             <ul className="mt-2 grid gap-1 text-sm md:grid-cols-2">
               {companies.rows.map((c, i) => (

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

@@ -0,0 +1,265 @@
+"use client";
+
+/**
+ * IntentScreen: the finished buyer-intent product page (Apollo / 6sense "intent"). Two tabs:
+ *   Accounts  accounts showing intent, strongest first (IntentFeed), a look-back window filter, a keyword scope chip,
+ *             and the selected account's detail panel (signals, trend, top keywords, buying-committee coverage).
+ *   Keywords  track keywords and competitor domains (IntentKeywordManager). Each keyword opens its complete detail screen
+ *             (KeywordDetail: fields, accounts showing intent for it, companies behind it, stop tracking; `?id=`).
+ * Every detail also opens as a full page with `?view=full`.
+ *
+ * User flows: see who is showing intent, filter to high intent, change the window, open an account (deep link
+ * `?id=<company id>`), read its buying committee, look up who visited a URL, track keywords, preview and track a
+ * competitor domain, list the companies behind a keyword, stop tracking (destructive, confirmed).
+ *
+ * SDK operations: none of its own. Composes IntentFeed (read), AccountIntentScore / useAccountIntent (read),
+ * IntentKeywordManager (billable + destructive, every call confirmed) and one read of listAbmCompanies for the stat strip.
+ * Prerequisite: ABM intent enabled for the workspace (a 403 is explained inline), and something to measure.
+ */
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { Button } from "@graph8/sdk/ui";
+import { Radar, Tags, X } from "lucide-react";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import type { StatItem } from "@/g8/components/screen/stat-strip";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { Toolbar } from "@/g8/components/screen/toolbar";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { BarList } from "@/g8/components/screen/bar-list";
+import { useAccountIntent } from "../hooks/use-account-intent";
+import { formatDate, rowsOf, totalOf } from "../lib/intent-utils";
+import type { AbmAccount, IntentKeywordRow } from "../lib/intent-utils";
+import { AccountIntentScore } from "./account-intent-score";
+import { IntentFeed } from "./intent-feed";
+import { IntentKeywordManager } from "./intent-keyword-manager";
+import { KeywordDetail } from "./keyword-detail";
+
+export interface IntentScreenProps {
+  /** Extra buttons for the toolbar (for example "Add to list" glue from another block). */
+  toolbarActions?: ReactNode;
+  /** Buttons shown in the account detail header. */
+  renderDetailActions?: (account: AbmAccount) => ReactNode;
+  /** Extra tabs in the account detail panel. */
+  extraDetailTabs?: { id: string; label: string; render: (account: AbmAccount) => ReactNode }[];
+  className?: string;
+}
+
+const WINDOWS = [7, 30, 90] as const;
+type Tab = "accounts" | "keywords";
+
+export function strengthTone(strength: string | null | undefined): "positive" | "warning" | "neutral" {
+  const s = (strength ?? "").toLowerCase();
+  if (s.includes("strong") || s === "high") return "positive";
+  if (s.includes("moderate") || s === "medium") return "warning";
+  return "neutral";
+}
+
+interface PanelProps {
+  onClose: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+}
+
+function AccountDetail({ account, panel, props }: { account: AbmAccount; panel: PanelProps; props: IntentScreenProps }) {
+  const name = account.company_name ?? account.company_domain ?? "Unknown company";
+  const keywords = (account.top_keywords ?? []).map((k) => ({ label: k.keyword ?? "keyword", value: k.signal_count ?? 0 }));
+  const trend = typeof account.trend_pct === "number" ? `${account.trend_pct > 0 ? "+" : ""}${Math.round(account.trend_pct)}%` : "No trend yet";
+  const tabs = [
+    {
+      id: "signals",
+      label: "Signals",
+      content: (
+        <div className="space-y-4">
+          <KeyValueList
+            columns={2}
+            items={[
+              { label: "Domain", value: account.company_domain ?? "-" },
+              { label: "Industry", value: account.industry ?? "-" },
+              { label: "Employees", value: account.employee_count ?? "-" },
+              { label: "Signals", value: account.total_signal_count ?? 0 },
+              { label: "Trend", value: trend },
+              { label: "Last signal", value: formatDate(account.latest_signal_date) },
+            ]}
+          />
+          <SectionCard title="Top keywords" description="Where this account's interest comes from.">
+            {keywords.length ? <BarList items={keywords} /> : <p className="text-sm text-muted-foreground">No keyword breakdown for this account.</p>}
+          </SectionCard>
+        </div>
+      ),
+    },
+    {
+      id: "committee",
+      label: "Buying committee",
+      content:
+        account.company_id != null ? (
+          <AccountIntentScore companyIds={[account.company_id]} />
+        ) : (
+          <p className="text-sm text-muted-foreground">This account has no company id to score.</p>
+        ),
+    },
+    ...(props.extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(account) })),
+  ];
+  return (
+    <DetailPanel
+      title={name}
+      subtitle={account.company_domain ?? undefined}
+      avatar={<EntityAvatar name={name} imageUrl={account.logo_url ?? undefined} kind="company" size="lg" />}
+      badges={
+        <>
+          <StatusPill tone={strengthTone(account.account_strength)}>{account.account_strength ?? "unscored"}</StatusPill>
+          {account.is_high_intent ? <StatusPill tone="negative" dot>High intent</StatusPill> : null}
+        </>
+      }
+      actions={props.renderDetailActions?.(account)}
+      tabs={tabs}
+      onClose={panel.onClose}
+      onExpand={panel.onExpand}
+      onCollapse={panel.onCollapse}
+    />
+  );
+}
+
+function useStats(days: number): { items: StatItem[] | undefined; loading: boolean } {
+  const q = useG8Query((signal) => g8Get("/intent/abm/companies", { days, page: 1, limit: 100 }, { signal }), [days]);
+  if (q.error || !q.data) return { items: undefined, loading: q.loading };
+  // The ABM payload is open-shaped in the contract: only report what the rows actually carry.
+  const rows = rowsOf<AbmAccount>(q.data);
+  const total = totalOf(q.data) ?? rows.length;
+  const items: StatItem[] = [{ label: "Accounts with intent", value: total.toLocaleString(), hint: `last ${days} days` }];
+  if (rows.some((r) => typeof r.is_high_intent === "boolean")) {
+    const high = rows.filter((r) => r.is_high_intent).length;
+    items.push({ label: "High intent", value: high, tone: high ? "negative" : "neutral", hint: "in the first 100" });
+  }
+  if (rows.some((r) => typeof r.account_strength === "string")) {
+    const strong = rows.filter((r) => strengthTone(r.account_strength) === "positive").length;
+    items.push({ label: "Strong accounts", value: strong, tone: strong ? "positive" : "neutral", hint: "in the first 100" });
+  }
+  return { loading: q.loading, items };
+}
+
+export function IntentScreen(props: IntentScreenProps) {
+  const [tab, setTab] = useUrlState("tab", "accounts");
+  const [id, setId] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const [days, setDays] = useState<number>(30);
+  const [selected, setSelected] = useState<AbmAccount | null>(null);
+  const [keyword, setKeyword] = useState<IntentKeywordRow | null>(null);
+  // `?kw=<keyword id>` scopes the account feed to one tracked keyword (chip in the toolbar).
+  const [scopeId, setScopeId] = useUrlState("kw", "");
+  const [scopeLabel, setScopeLabel] = useState<string | null>(null);
+  const [removed, setRemoved] = useState<string[]>([]);
+  const stats = useStats(days);
+  const active: Tab = tab === "keywords" ? "keywords" : "accounts";
+  const expanded = view === "full" && Boolean(id);
+  // A non-numeric `?id=` opens nothing instead of asking for account NaN.
+  const idNumber = id && Number.isFinite(Number(id)) ? Number(id) : null;
+  const deepLinked = useAccountIntent(active === "accounts" && idNumber != null && !selected ? [idNumber] : [], days);
+  const account = selected ?? (active === "accounts" && idNumber != null && deepLinked.rollups[id] ? { ...deepLinked.rollups[id], company_id: idNumber } : null);
+  // A deep-linked account with no signal in this window (or a bad id) gets a not-found state instead of a silent no-op.
+  const accountMissing = active === "accounts" && Boolean(id) && !account && (idNumber == null || (!deepLinked.loading && !deepLinked.error));
+  const accountFailed = active === "accounts" && Boolean(id) && !account && idNumber != null && Boolean(deepLinked.error);
+
+  const close = () => {
+    setSelected(null);
+    setKeyword(null);
+    setId("");
+    setView("");
+  };
+  const panel: PanelProps = {
+    onClose: close,
+    onExpand: expanded ? undefined : () => setView("full"),
+    onCollapse: expanded ? () => setView("") : undefined,
+  };
+  const showAccounts = (k: IntentKeywordRow) => {
+    close();
+    setScopeId(k.id);
+    setScopeLabel(k.keyword);
+    setTab("accounts");
+  };
+  const openAccount = (a: AbmAccount) => {
+    setTab("accounts");
+    setKeyword(null);
+    setSelected(a);
+    setId(String(a.company_id ?? ""));
+  };
+
+  return (
+    <ScreenLayout
+      title="Intent"
+      description="Accounts researching what you sell, and the keywords and competitors you track to find them."
+      icon={<Radar className="size-5" />}
+      actions={
+        <Button onClick={() => { setTab("keywords"); close(); }}>
+          <Tags className="mr-1.5 size-4" /> Track keywords
+        </Button>
+      }
+      tabs={[
+        { id: "accounts", label: "Accounts" },
+        { id: "keywords", label: "Keywords" },
+      ]}
+      activeTab={active}
+      onTabChange={(next) => {
+        setTab(next);
+        close();
+      }}
+      stats={active === "accounts" ? stats.items : undefined}
+      className={props.className}
+    >
+      {active === "accounts" ? (
+        <div className="space-y-3">
+          <Toolbar actions={props.toolbarActions}>
+            {scopeId ? (
+              <Button size="sm" variant="outline" aria-label={`Remove keyword scope ${scopeLabel ?? scopeId}`} onClick={() => { setScopeId(null); setScopeLabel(null); }}>
+                Keyword: {scopeLabel ?? scopeId} <X className="ml-1 size-3.5" aria-hidden />
+              </Button>
+            ) : null}
+            <div className="inline-flex gap-1" role="group" aria-label="Look-back window">
+              {WINDOWS.map((w) => (
+                <Button key={w} size="sm" variant={days === w ? "default" : "outline"} aria-pressed={days === w} onClick={() => setDays(w)}>
+                  {w} days
+                </Button>
+              ))}
+            </div>
+          </Toolbar>
+          <SplitView
+            detailOpen={Boolean(account) || accountMissing || accountFailed}
+            onCloseDetail={close}
+            expanded={expanded && Boolean(account)}
+            onExpandedChange={(next) => setView(next ? "full" : "")}
+            detailWidth="lg"
+            list={<IntentFeed key={scopeId || "all"} days={days} keywordIds={scopeId ? [scopeId] : undefined} onSelectAccount={openAccount} />}
+            detail={account ? (
+              <AccountDetail key={account.company_id ?? account.company_domain} account={account} panel={panel} props={props} />
+            ) : accountFailed ? (
+              <div className="space-y-3 p-4"><ApiError error={deepLinked.error} title="Could not load this account's intent" onRetry={() => void deepLinked.refetch()} /><Button size="sm" variant="outline" onClick={close}>Close</Button></div>
+            ) : accountMissing ? (
+              <div className="space-y-3 p-4"><EmptyState title="No intent for this account" description={`No buying-intent signal for this account in the last ${days} days. Try a longer window.`} /><Button size="sm" variant="outline" onClick={close}>Close</Button></div>
+            ) : null}
+          />
+        </div>
+      ) : (
+        <SplitView
+          detailOpen={Boolean(id)}
+          onCloseDetail={close}
+          expanded={expanded}
+          onExpandedChange={(next) => setView(next ? "full" : "")}
+          detailWidth="lg"
+          list={<IntentKeywordManager hiddenIds={removed} onSelectKeyword={(k) => { setKeyword(k); setId(k.id); }} />}
+          detail={id ? (
+            <KeywordDetail key={id} keywordId={id} keyword={keyword?.id === id ? keyword : null} onLoaded={setKeyword}
+              onSelectAccount={openAccount} onShowAccounts={showAccounts} onRemoved={(kid) => setRemoved((r) => [...r, kid])} {...panel} />
+          ) : null}
+        />
+      )}
+    </ScreenLayout>
+  );
+}

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

@@ -0,0 +1,124 @@
+"use client";
+
+/**
+ * KeywordDetail: the complete screen for one tracked keyword or competitor domain. Shows every field the list returns, the
+ * accounts currently showing intent for it (the intent feed scoped to this keyword), the companies resolved behind it, and the
+ * action to stop tracking. Pass the row from IntentKeywordManager; with only an id (a deep link) it offers to load the row.
+ *
+ * SDK operations, in order:
+ *   1. listAbmCompanies  GET    /intent/abm/companies?keyword_ids   (read; inside IntentFeed)
+ *   2. keywordsList      POST   /intent/keywords/list               (billable tier, confirmed; only to restore a row from an id)
+ *   3. keywordCompanies  POST   /intent/keywords/{id}/companies     (billable, confirmed)
+ *   4. keywordsDelete    DELETE /intent/keywords/{id}               (destructive, confirmed; 404 counts as done)
+ */
+import { useState } from "react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Delete, g8Post } from "@/g8/lib/g8-client";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+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 { rowsOf } from "../lib/intent-utils";
+import type { AbmAccount, IntentKeywordRow } from "../lib/intent-utils";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { AskButton, useConfirmAction } from "@/g8/components/confirmed-action";
+import { IntentFeed } from "./intent-feed";
+
+export interface KeywordDetailProps {
+  keywordId: string;
+  /** The row from the keyword list. Without it the screen can restore it after a confirmed list call. */
+  keyword?: IntentKeywordRow | null;
+  /** Called with the restored row. */
+  onLoaded?: (keyword: IntentKeywordRow) => void;
+  onSelectAccount?: (account: AbmAccount) => void;
+  onClose?: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  /** Called after the keyword was removed. */
+  onRemoved?: (keywordId: string) => void;
+  /** Shows a "Show accounts" button that scopes the account feed to this keyword. */
+  onShowAccounts?: (keyword: IntentKeywordRow) => void;
+}
+
+interface CompanyRow {
+  name?: string | null;
+  company_name?: string | null;
+  COMPANY_NAME?: string | null;
+  domain?: string | null;
+  company_domain?: string | null;
+  COMPANY_DOMAIN?: string | null;
+}
+const companyName = (c: CompanyRow) => c.name ?? c.company_name ?? c.COMPANY_NAME ?? c.domain ?? c.company_domain ?? c.COMPANY_DOMAIN ?? "Unknown";
+
+export function KeywordDetail({ keywordId, keyword, onLoaded, onSelectAccount, onClose, onExpand, onCollapse, onRemoved, onShowAccounts }: KeywordDetailProps) {
+  const { ask, dialog, failure } = useConfirmAction();
+  const [companies, setCompanies] = useState<CompanyRow[] | null>(null);
+  const restore = useG8Mutation(async () => {
+    const found = rowsOf<IntentKeywordRow>(await g8Post("/intent/keywords/list", { page: 1, limit: 200 })).find((k) => k.id === keywordId);
+    if (found) onLoaded?.(found);
+    return found ?? null;
+  });
+
+  if (!keyword) {
+    return (
+      <div className="space-y-3 p-4">
+        {restore.data === null ? (
+          <EmptyState title="Keyword not found" description="It is no longer among your tracked keywords. It may have been removed." />
+        ) : (
+          <EmptyState title="Keyword details are not loaded" description="Listing tracked keywords is a billable read, so it asks first." />
+        )}
+        <div className="flex justify-center">
+          <AskButton ask={ask} label="Load keyword" tier="billable" title="Load tracked keywords" confirmLabel="Load keywords" description="Listing tracked keywords is classified billable by the API."
+            run={async () => { await restore.mutateAsync(undefined); }} />
+        </div>
+        {/* A failed load surfaces once, through the confirm hook's `failure`. */}
+        {failure ? <ApiError error={failure} title="That did not work" /> : null}
+        <ConfirmSpendDialog {...dialog} />
+      </div>
+    );
+  }
+
+  const actions = (
+    <div className="flex flex-wrap gap-1">
+      {onShowAccounts ? <Button size="sm" variant="outline" onClick={() => onShowAccounts(keyword)}>Show accounts</Button> : null}
+      <AskButton ask={ask} label="Load companies" tier="billable" title={`Load companies for "${keyword.keyword}"`} confirmLabel="Load companies" description="Resolves the companies behind this keyword's traffic."
+        run={async () => setCompanies(rowsOf<CompanyRow>(await g8Post(`/intent/keywords/${keyword.id}/companies`, { limit: 50, page: 1 })))} />
+      <AskButton ask={ask} label="Stop tracking" variant="ghost" tier="destructive" title={`Stop tracking "${keyword.keyword}"`} confirmLabel="Stop tracking" tolerateStatus={[404]}
+        description="The keyword is removed. Companies already saved to lists stay." run={() => g8Delete(`/intent/keywords/${keyword.id}`)} onDone={() => { onRemoved?.(keyword.id); onClose?.(); }} />
+    </div>
+  );
+  const tabs = [
+    {
+      id: "overview",
+      label: "Overview",
+      content: (
+        <div className="space-y-4">
+          <KeyValueList columns={2} items={[
+            { label: "Keyword", value: keyword.keyword },
+            { label: "Type", value: keyword.signal_type ?? "-" },
+            { label: "Companies resolved", value: keyword.total_resolved_companies ?? 0 },
+            { label: "People resolved", value: keyword.total_resolved_contacts ?? 0 },
+            { label: "Pages tracked", value: keyword.total_urls ?? "-" },
+            { label: "Auto sync", value: keyword.auto_sync_enabled == null ? "-" : keyword.auto_sync_enabled ? "on" : "off" },
+          ]} />
+          <SectionCard title="Companies behind this keyword" description="Loading them is billable, so it asks first (Load companies above).">
+            {companies == null ? <p className="text-sm text-muted-foreground">Not loaded yet.</p> : companies.length === 0 ? <p className="text-sm text-muted-foreground">No resolved companies yet.</p> : (
+              <ul className="grid gap-1 text-sm md:grid-cols-2">{companies.map((c, i) => <li key={i}>{companyName(c)}</li>)}</ul>
+            )}
+          </SectionCard>
+        </div>
+      ),
+    },
+    { id: "accounts", label: "Accounts showing intent", content: <IntentFeed keywordIds={[keyword.id]} onSelectAccount={onSelectAccount} /> },
+  ];
+  return (
+    <>
+      <DetailPanel title={keyword.keyword} subtitle="Tracked keyword" badges={<StatusPill tone={keyword.is_active === false ? "neutral" : "positive"}>{keyword.is_active === false ? "inactive" : "tracking"}</StatusPill>} actions={actions} tabs={tabs} onClose={onClose} onExpand={onExpand} onCollapse={onCollapse} />
+      {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </>
+  );
+}

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

@@ -88,8 +88,8 @@ export function formatDate(value: string | null | undefined): string {
 /** Tailwind classes for an account-strength label. Unknown labels stay neutral. */
 export function strengthClass(strength: string | null | undefined): string {
   const s = (strength ?? "").toLowerCase();
-  if (s.includes("strong") || s === "high") return "bg-green-100 text-green-800";
-  if (s.includes("moderate") || s === "medium") return "bg-amber-100 text-amber-800";
-  if (s.includes("weak") || s === "low") return "bg-gray-100 text-gray-700";
-  return "bg-gray-100 text-gray-700";
+  if (s.includes("strong") || s === "high") return "bg-positive text-positive-foreground";
+  if (s.includes("moderate") || s === "medium") return "bg-warning text-warning-foreground";
+  if (s.includes("weak") || s === "low") return "bg-muted text-foreground";
+  return "bg-muted text-foreground";
 }

package/blocks/lifecycle/block.json

@@ -13,17 +13,18 @@
     "crm"
   ],
   "operations": [
-    "list_lifecycle_stages_lifecycle_stages_get",
+    "get_account_intent_signals_accounts__account_id__intent_signals_get",
+    "get_brief_customer_success_companies__company_id__brief_get",
+    "get_company_companies__company_id__get",
     "get_lifecycle_stage_counts_lifecycle_stages_counts_get",
+    "get_revenue_summary_accounts_revenue_summary_get",
+    "list_lifecycle_contacts_lifecycle_contacts_get",
     "list_lifecycle_stage_records_lifecycle_stages__stage__records_get",
+    "list_lifecycle_stages_lifecycle_stages_get",
     "move_company_lifecycle_stage_companies__company_id__lifecycle_stage_post",
     "move_contact_lifecycle_stage_contacts__contact_id__lifecycle_stage_post",
-    "list_lifecycle_contacts_lifecycle_contacts_get",
-    "unlock_lifecycle_contacts_lifecycle_contacts_unlock_post",
-    "get_revenue_summary_accounts_revenue_summary_get",
-    "get_brief_customer_success_companies__company_id__brief_get",
     "synthesize_brief_customer_success_companies__company_id__brief_synthesize_post",
-    "get_account_intent_signals_accounts__account_id__intent_signals_get"
+    "unlock_lifecycle_contacts_lifecycle_contacts_unlock_post"
   ],
   "components": [
     {
@@ -103,8 +104,12 @@
       "name": "LifecycleScreen",
       "file": "components/lifecycle-screen.tsx",
       "purpose": "Finished lifecycle product: board, one tab per stage (contact queue, customers, churned) and a CRM record panel with Move stage.",
-      "operations": [],
-      "tiers": []
+      "operations": [
+        "get_company_companies__company_id__get"
+      ],
+      "tiers": [
+        "read"
+      ]
     },
     {
       "name": "AccountBriefTab",