@graph8/sdk 0.361.0 → 0.370.0

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

@@ -2,6 +2,8 @@
 
 /** Types and helpers shared by the integrations components. */
 
+import { DEFAULT_BRAND } from "@/g8/hooks/use-brand";
+
 export const CRM_PROVIDERS = ["hubspot", "salesforce", "pipedrive", "zoho", "sugarcrm"] as const;
 export type CrmProvider = (typeof CRM_PROVIDERS)[number];
 
@@ -14,7 +16,10 @@ export const PROVIDER_LABELS: Record<CrmProvider, string> = {
 };
 
 /** Where the person completes an OAuth connection. The API has no way to run the consent screen for you. */
-export const GRAPH8_APP_INTEGRATIONS_URL = "https://app.graph8.com/studio/settings?tab=integrations";
+/** The path on the platform's web app; components resolve it against the brand (`brandUrl(useBrand(), ...)`). */
+export const GRAPH8_APP_INTEGRATIONS_PATH = "/studio/settings?tab=integrations";
+/** The default (graph8) URL. Kept for existing imports; prefer GRAPH8_APP_INTEGRATIONS_PATH with useBrand. */
+export const GRAPH8_APP_INTEGRATIONS_URL = `${DEFAULT_BRAND.appUrl}${GRAPH8_APP_INTEGRATIONS_PATH}`;
 
 export interface CrmSyncRow {
   provider: string;

package/blocks/intent/README.md

@@ -5,6 +5,20 @@ and score any account by strength and buying-committee coverage. The Apollo / 6s
 
 Depends on: `crm` (account rows link to your company records). Install: `npx @graph8/sdk add intent`.
 
+## Screens
+
+`IntentScreen` (`components/intent-screen.tsx`) is the finished page: copy it as your route. No props are required.
+
+- **Accounts tab**: the intent feed with a 7/30/90 day window, a high-intent filter, a keyword scope chip (`?kw=<keyword id>`),
+  a stat strip, and a detail panel for the clicked account (signals, trend, top keywords, buying-committee coverage). Deep link:
+  `?id=<company id>`; an account with no signal in the window shows "No intent for this account".
+  "Who visited this URL" lives under the table.
+- **Keywords tab**: track keywords, preview then track a competitor domain, load the companies behind a keyword, stop tracking.
+  Clicking a keyword opens its detail; "Show accounts" there scopes the Accounts tab to it. Every billable or destructive
+  call is confirmed.
+- Slots: `toolbarActions`, `renderDetailActions(account)`, `extraDetailTabs`.
+- Prerequisites: ABM intent enabled for the workspace (403 is explained inline) and something to measure.
+
 ## Components
 
 | Component | What it does | Tiers |

package/blocks/intent/block.json

@@ -61,6 +61,31 @@
       "tiers": [
         "read"
       ]
+    },
+    {
+      "name": "IntentScreen",
+      "file": "components/intent-screen.tsx",
+      "purpose": "Finished buyer-intent page: accounts feed with window and keyword filters, account detail panel (signals, top keywords, buying committee) and keyword/competitor tracking.",
+      "operations": [
+        "list_abm_companies_intent_abm_companies_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "KeywordDetail",
+      "file": "components/keyword-detail.tsx",
+      "purpose": "Complete screen for one tracked keyword: fields, accounts showing intent, companies behind it, stop tracking.",
+      "operations": [
+        "keywords_list_intent_keywords_list_post",
+        "keyword_companies_intent_keywords__keyword_id__companies_post",
+        "keywords_delete_intent_keywords__keyword_id__delete"
+      ],
+      "tiers": [
+        "billable",
+        "destructive"
+      ]
     }
   ],
   "hooks": [
@@ -133,6 +158,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400"
   }
 }

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. */
@@ -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.
@@ -130,7 +133,7 @@ export function IntentFeed({ days = 30, keywordIds, pageSize = 25, refreshSecond
 
       {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.
+          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,7 +163,7 @@ 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>

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,]/)
@@ -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)}>

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/lifecycle/README.md

@@ -13,6 +13,22 @@ These five are ONE parametrised view keyed by stage, not five features: the stag
 | `ChurnList` | Churned companies, last MRR, on-demand activity check, win-back to Leads. |
 | `useLifecycleStages` (hook) | Stages and their counts. |
 
+## Screens
+
+`LifecycleScreen` (`components/lifecycle-screen.tsx`): `<LifecycleScreen />`.
+
+- A count per stage as headline numbers, then a Board tab and one tab per stage (custom stages included).
+- Board: columns of companies with Move (a dry run shows refusals first, for example Customers without an active
+  subscription). Customers tab: the book of business with MRR, headline counts and the account brief (rewriting it
+  uses credits, confirmed). Churned tab: lost revenue, an activity check and a win-back to Leads. Every other stage is
+  a contact queue with search; locked emails are unlocked with credits (confirmed) and contacts can be moved.
+- Open a company or contact (deep link `?rec=company:<id>` or `?rec=contact:<id>`) to get the crm block's full record
+  (activity, notes, tasks, edit) with a **Move stage** action.
+- Slots, all optional: `renderDetailActions(record)`, `extraDetailTabs`, `toolbarActions`.
+
+Proxy `allowedPrefixes` must also include the crm block's prefixes for the record panel.
+
+
 ## Flow, in order (and the ids passed between steps)
 
 1. `GET /lifecycle-stages` -> each stage has `id` (entry id) and `slug` (`suspects`, `leads`, `trials`, `customers`, `churned`).

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": [
     {
@@ -98,6 +99,31 @@
         "read",
         "write"
       ]
+    },
+    {
+      "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": [
+        "get_company_companies__company_id__get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "AccountBriefTab",
+      "file": "components/account-related.tsx",
+      "purpose": "Account views for the record panel: the customer-success brief (rewrite is billable and confirmed) and AccountSignalsTab, recent intent signals.",
+      "operations": [
+        "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"
+      ],
+      "tiers": [
+        "read",
+        "billable"
+      ]
     }
   ],
   "hooks": [
@@ -193,6 +219,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400.0"
   }
 }