@graph8/sdk 0.362.0 → 0.370.0

package/blocks/integrations/components/sync-status.tsx

@@ -26,6 +26,7 @@ import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { formatWhen, PROVIDER_LABELS, TERMINAL_JOB_STATES } from "../lib/integrations-utils";
 import type { CrmProvider, CrmStatus } from "../lib/integrations-utils";
+import { useBrand } from "@/g8/hooks/use-brand";
 
 export interface SyncStatusProps {
   provider: CrmProvider;
@@ -59,6 +60,7 @@ function JobProgress({ jobId }: { jobId: string }) {
 }
 
 export function SyncStatus({ provider, records, className }: SyncStatusProps) {
+  const brand = useBrand();
   const [pending, setPending] = useState<Pending | null>(null);
   const [jobId, setJobId] = useState<string | null>(null);
   const [pushed, setPushed] = useState<string | null>(null);
@@ -116,7 +118,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
   if (!s?.connected) {
     return (
       <p role="status" className={`rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900 ${className ?? ""}`}>
-        {label} is not connected. {s?.message ?? "Connect it in graph8, then come back."}
+        {label} is not connected. {s?.message ?? `Connect it in ${brand.linkLabel}, then come back.`}
       </p>
     );
   }
@@ -132,7 +134,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
         ? {
             title: `${pending.enabled ? "Turn on" : "Turn off"} continuous ${pending.direction} with ${label}`,
             description: pending.enabled
-              ? `graph8 will keep ${pending.direction === "push" ? "writing contacts to" : "reading contacts from"} your CRM.`
+              ? `${brand.linkLabel} will keep ${pending.direction === "push" ? "writing contacts to" : "reading contacts from"} your CRM.`
               : "Syncing in this direction stops.",
             label: pending.enabled ? "Turn on" : "Turn off",
           }
@@ -152,7 +154,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
 
       {(["push", "pull"] as const).map((direction) => (
         <div key={direction} className="flex items-center justify-between rounded border border-gray-200 px-3 py-2 text-sm">
-          <span>{direction === "push" ? "Send graph8 contacts to the CRM" : "Bring CRM contacts into graph8"}</span>
+          <span>{direction === "push" ? `Send ${brand.linkLabel} contacts to the CRM` : `Bring CRM contacts into ${brand.linkLabel}`}</span>
           <span className="flex gap-2">
             <Button
               size="sm"

package/blocks/integrations/components/webhook-detail.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+/**
+ * WebhookDetail: the complete screen for one webhook. Finds it by id (so `?id=` deep links work), shows every field (endpoint, name,
+ * events, active state, field filters, created and updated times), its delivery log, and every action: rename, change the endpoint or
+ * the events, pause or resume, rotate the signing secret (shown once), delete.
+ *
+ * SDK operations, in order:
+ *   1. listWebhooks          GET    /webhooks                          (read)
+ *   2. listWebhookEvents     GET    /webhooks/events                   (read; the event names to pick from)
+ *   3. listWebhookDeliveries GET    /webhooks/{id}/deliveries          (read)
+ *   4. updateWebhook         PATCH  /webhooks/{id}                     (external, confirmed; edit, pause, resume)
+ *   5. rotateWebhookSecret   POST   /webhooks/{id}/rotate-secret       (external, confirmed; new secret shown once)
+ *   6. deleteWebhook         DELETE /webhooks/{id}                     (destructive, confirmed; 404 counts as done)
+ * Verify deliveries on the server with g8.webhooks.constructEvent; the secret never belongs in browser code.
+ */
+import { useEffect, useState, type ReactNode } from "react";
+import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { EmptyState } from "@/g8/components/empty-state";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get, g8Patch, 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 { arrayOf, formatWhen } from "../lib/integrations-utils";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { AskButton, useConfirmAction } from "@/g8/components/confirmed-action";
+import { useBrand } from "@/g8/hooks/use-brand";
+
+export interface WebhookDetailProps {
+  webhookId: string;
+  onClose?: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  onChanged?: () => void;
+  /** Extra header actions from the screen's `renderDetailActions` slot. */
+  extraActions?: ReactNode;
+  /** Extra tabs from the screen's `extraDetailTabs` slot, after the built-in ones. */
+  extraTabs?: { id: string; label: string; content: ReactNode }[];
+}
+
+interface Hook { id: string; url: string; name?: string | null; events?: string[]; is_active?: boolean; created_at?: string | null; updated_at?: string | null; field_filters?: Record<string, string[]> | null; secret?: string | null }
+interface EventType { event: string; category?: string | null; description?: string | null }
+interface Delivery { id: string; event: string; status: string; attempts?: number; max_attempts?: number; response_code?: number | null; error_message?: string | null; created_at?: string | null; completed_at?: string | null }
+
+export function WebhookDetail({ webhookId, onClose, onExpand, onCollapse, onChanged, extraActions, extraTabs }: WebhookDetailProps) {
+  const brand = useBrand();
+  const { ask, dialog, failure } = useConfirmAction();
+  const hooks = useG8Query((signal) => g8Get("/webhooks", undefined, { signal }), []);
+  const events = useG8Query((signal) => g8Get("/webhooks/events", undefined, { signal }), []);
+  const deliveries = useG8Query((signal) => g8Get(`/webhooks/${webhookId}/deliveries`, { page: 1, limit: 20 }, { signal }), [webhookId]);
+  const hook = arrayOf<Hook>(hooks.data).find((h) => h.id === webhookId);
+  const [form, setForm] = useState({ url: "", name: "", events: [] as string[] });
+  const [secret, setSecret] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (hook) setForm({ url: hook.url, name: hook.name ?? "", events: hook.events ?? [] });
+  }, [hook?.id, hook?.url, hook?.name, hook?.events?.join(",")]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (hooks.error) return <ApiError error={hooks.error} title="Could not load the webhook" onRetry={() => void hooks.refetch()} />;
+  if (!hooks.data) return <Skeleton className="h-40 w-full" />;
+  if (!hook) return <EmptyState title="Webhook not found" description="It may have been deleted." />;
+  const changed = () => { void hooks.refetch(); onChanged?.(); };
+  const active = hook.is_active !== false;
+  const byCategory = arrayOf<EventType>(events.data).reduce<Record<string, EventType[]>>((acc, e) => ({ ...acc, [e.category ?? "other"]: [...(acc[e.category ?? "other"] ?? []), e] }), {});
+  const toggle = (event: string) => setForm((f) => ({ ...f, events: f.events.includes(event) ? f.events.filter((x) => x !== event) : [...f.events, event] }));
+  const urlOk = /^https:\/\/\S+$/.test(form.url.trim());
+  const rows = arrayOf<Delivery>(deliveries.data);
+
+  const actions = (
+    <div className="flex flex-wrap gap-1">
+      <AskButton ask={ask} label={active ? "Pause" : "Resume"} tier="external" title={`${active ? "Pause" : "Resume"} deliveries to ${hook.url}`} confirmLabel={active ? "Pause" : "Resume"}
+        description={active ? "Events stop being sent to this endpoint until you resume." : "Events are sent to this endpoint again."} run={() => g8Patch(`/webhooks/${hook.id}`, { is_active: !active })} onDone={changed} />
+      <AskButton ask={ask} label="Rotate secret" tier="external" title={`Rotate the signing secret for ${hook.url}`} confirmLabel="Rotate"
+        description="The old secret stops verifying deliveries as soon as you rotate. Update your server before or right after."
+        run={async () => { const res = await g8Post<Hook>(`/webhooks/${hook.id}/rotate-secret`); if (res.data?.secret) setSecret(res.data.secret); }} onDone={changed} />
+      <AskButton ask={ask} label="Delete" variant="ghost" tier="destructive" title={`Delete the webhook for ${hook.url}`} confirmLabel="Delete" tolerateStatus={[404]}
+        description={`${brand.linkLabel} stops sending events to this endpoint and removes its delivery log.`} run={() => g8Delete(`/webhooks/${hook.id}`)} onDone={() => { changed(); onClose?.(); }} />
+    </div>
+  );
+
+  const tabs = [
+    {
+      id: "overview",
+      label: "Overview",
+      content: (
+        <div className="space-y-4">
+          {secret ? (
+            <div role="alert" className="rounded border border-amber-300 bg-amber-50 p-3 text-sm">
+              <p className="font-medium">New signing secret. It is shown once.</p>
+              <code className="mt-1 block break-all rounded bg-white p-2">{secret}</code>
+              <p className="mt-1 text-xs">Store it as G8_WEBHOOK_SECRET on your server. Never put it in browser code.</p>
+              <Button size="sm" variant="outline" className="mt-2" onClick={() => setSecret(null)}>I saved it</Button>
+            </div>
+          ) : null}
+          <KeyValueList columns={2} items={[
+            { label: "Endpoint", value: hook.url },
+            { label: "Name", value: hook.name ?? "-" },
+            { label: "Status", value: active ? "active" : "paused" },
+            { label: "Created", value: formatWhen(hook.created_at) },
+            { label: "Updated", value: formatWhen(hook.updated_at) },
+            { label: "Events", value: (hook.events ?? []).length },
+          ]} />
+          <SectionCard title="Subscribed events"><ul className="flex flex-wrap gap-1 text-xs">{(hook.events ?? []).map((e) => <li key={e}><StatusPill tone="neutral">{e}</StatusPill></li>)}</ul></SectionCard>
+          {hook.field_filters && Object.keys(hook.field_filters).length > 0 ? (
+            <SectionCard title="Field filters" description="crm.record.updated fires only when a watched field changed."><pre className="overflow-x-auto text-xs">{JSON.stringify(hook.field_filters, null, 2)}</pre></SectionCard>
+          ) : null}
+        </div>
+      ),
+    },
+    {
+      id: "edit",
+      label: "Edit",
+      content: (
+        <SectionCard title="Edit webhook" description="Changing where events go is confirmed first.">
+          <div className="space-y-3">
+            <div className="flex flex-col gap-1"><Label htmlFor="wd-url">Endpoint URL</Label><Input id="wd-url" value={form.url} onChange={(e) => setForm({ ...form, url: e.target.value })} /></div>
+            {form.url && !urlOk ? <p className="text-xs text-error-foreground">The endpoint must be an https:// URL.</p> : null}
+            <div className="flex flex-col gap-1"><Label htmlFor="wd-name">Name</Label><Input id="wd-name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></div>
+            {Object.entries(byCategory).map(([category, items]) => (
+              <fieldset key={category}>
+                <legend className="text-xs font-medium uppercase text-muted-foreground">{category}</legend>
+                <div className="flex flex-wrap gap-x-4 gap-y-1">
+                  {items.map((e) => <label key={e.event} className="flex items-center gap-1 text-sm" title={e.description ?? undefined}><input type="checkbox" checked={form.events.includes(e.event)} onChange={() => toggle(e.event)} />{e.event}</label>)}
+                </div>
+              </fieldset>
+            ))}
+            <AskButton ask={ask} label="Save changes" variant="default" tier="external" title={`Update the webhook for ${hook.url}`} confirmLabel="Save" disabled={!urlOk || form.events.length === 0}
+              description={`Changes where ${brand.linkLabel} sends your data.`} run={() => g8Patch(`/webhooks/${hook.id}`, { url: form.url.trim(), name: form.name.trim() || null, events: form.events })} onDone={changed} />
+          </div>
+        </SectionCard>
+      ),
+    },
+    {
+      id: "deliveries",
+      label: "Deliveries",
+      content: deliveries.loading && !deliveries.data ? <Skeleton className="h-16 w-full" /> : deliveries.error ? <ApiError error={deliveries.error} onRetry={() => void deliveries.refetch()} /> : rows.length === 0 ? <p className="text-sm text-muted-foreground">No deliveries yet.</p> : (
+        <table className="w-full text-sm" aria-label="Deliveries">
+          <thead><tr className="text-left text-muted-foreground"><th>Event</th><th>Status</th><th>Code</th><th>Attempts</th><th>When</th></tr></thead>
+          <tbody>
+            {rows.map((d) => (
+              <tr key={d.id} className="border-t" title={d.error_message ?? undefined}>
+                <td>{d.event}</td><td>{d.status}</td><td>{d.response_code ?? "-"}</td><td>{d.attempts ?? 1}{d.max_attempts ? ` of ${d.max_attempts}` : ""}</td><td>{formatWhen(d.created_at)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      ),
+    },
+  ];
+  return (
+    <>
+      <DetailPanel title={hook.name || hook.url} subtitle={hook.name ? hook.url : undefined} badges={<StatusPill tone={active ? "positive" : "neutral"}>{active ? "active" : "paused"}</StatusPill>} actions={extraActions ? <>{actions}{extraActions}</> : actions} tabs={extraTabs?.length ? [...tabs, ...extraTabs] : tabs} onClose={onClose} onExpand={onExpand} onCollapse={onCollapse} />
+      {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </>
+  );
+}

package/blocks/integrations/components/webhook-manager.tsx

@@ -27,10 +27,14 @@ 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 { arrayOf, formatWhen } from "../lib/integrations-utils";
+import { plural } from "@/g8/lib/plural";
+import { DEFAULT_BRAND, useBrand } from "@/g8/hooks/use-brand";
 
 export interface WebhookManagerProps {
   /** Pre-fill the endpoint URL of the create form (your /api/webhooks/graph8 route). */
   defaultUrl?: string;
+  /** Called when a person opens a webhook (show a WebhookDetail). */
+  onSelectWebhook?: (webhook: { id: string; url: string; name?: string | null }) => void;
   className?: string;
 }
 
@@ -65,13 +69,13 @@ type Pending =
   | { kind: "rotate"; hook: Webhook }
   | { kind: "delete"; hook: Webhook };
 
-function copyFor(p: Pending): { tier: ConfirmTier; title: string; description: string; label: string } {
+function copyFor(p: Pending, platform: string = DEFAULT_BRAND.linkLabel): { tier: ConfirmTier; title: string; description: string; label: string } {
   switch (p.kind) {
     case "create":
       return {
         tier: "external",
-        title: `Send ${p.events.length} event type${p.events.length === 1 ? "" : "s"} to ${p.url}`,
-        description: "graph8 will POST signed events to this URL as they happen.",
+        title: `Send ${plural(p.events.length, "event type")} to ${p.url}`,
+        description: `${platform} will POST signed events to this URL as they happen.`,
         label: "Create webhook",
       };
     case "toggle":
@@ -80,7 +84,7 @@ function copyFor(p: Pending): { tier: ConfirmTier; title: string; description: s
         title: `${p.hook.is_active === false ? "Resume" : "Pause"} deliveries to ${p.hook.url}`,
         description:
           p.hook.is_active === false
-            ? "graph8 starts sending events to this URL again."
+            ? `${platform} starts sending events to this URL again.`
             : "Events stop being sent to this URL until you resume.",
         label: p.hook.is_active === false ? "Resume" : "Pause",
       };
@@ -133,7 +137,8 @@ function Deliveries({ hook }: { hook: Webhook }) {
   );
 }
 
-export function WebhookManager({ defaultUrl = "", className }: WebhookManagerProps) {
+export function WebhookManager({ defaultUrl = "", onSelectWebhook, className }: WebhookManagerProps) {
+  const brand = useBrand();
   const hooks = useG8Query((signal) => g8Get("/webhooks", undefined, { signal }), []);
   const events = useG8Query((signal) => g8Get("/webhooks/events", undefined, { signal }), []);
   const [url, setUrl] = useState(defaultUrl);
@@ -169,7 +174,7 @@ export function WebhookManager({ defaultUrl = "", className }: WebhookManagerPro
   );
   const urlOk = /^https:\/\/\S+$/.test(url.trim());
   const toggle = (event: string) => setChosen((c) => (c.includes(event) ? c.filter((x) => x !== event) : [...c, event]));
-  const confirm = pending ? copyFor(pending) : null;
+  const confirm = pending ? copyFor(pending, brand.linkLabel) : null;
 
   return (
     <div className={`space-y-4 ${className ?? ""}`}>
@@ -178,7 +183,7 @@ export function WebhookManager({ defaultUrl = "", className }: WebhookManagerPro
         <div className="grid gap-2 md:grid-cols-2">
           <Input
             aria-label="Endpoint URL"
-            placeholder="https://yourapp.com/api/webhooks/graph8"
+            placeholder={`https://yourapp.com/api/webhooks/${brand.linkLabel.toLowerCase().replace(/[^a-z0-9-]+/g, "-")}`}
             value={url}
             onChange={(e) => setUrl(e.target.value)}
           />
@@ -238,7 +243,7 @@ export function WebhookManager({ defaultUrl = "", className }: WebhookManagerPro
             <li key={h.id} className="space-y-2 px-3 py-3">
               <div className="flex flex-wrap items-center justify-between gap-2">
                 <div>
-                  <div className="font-medium">{h.name || h.url}</div>
+                  {onSelectWebhook ? <button type="button" className="font-medium hover:underline" onClick={() => onSelectWebhook(h)}>{h.name || h.url}</button> : <div className="font-medium">{h.name || h.url}</div>}
                   <div className="text-xs text-gray-500">
                     {h.name ? `${h.url} - ` : ""}
                     {(h.events ?? []).length} events - {h.is_active === false ? "paused" : "active"}

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)}>