@graph8/sdk 0.370.0 → 0.373.0

package/blocks/integrations/components/workspace-tools.tsx

@@ -0,0 +1,127 @@
+"use client";
+
+/**
+ * WorkspaceTools: Slack, Google Workspace and Roam, each as a card with its live status. They connect through a sign-in screen that only runs
+ * in the graph8 app, so a tool that is not connected shows a "Connect in graph8" link, never a dead button. Connected tools show what the
+ * status reports. Google Workspace also has "Test connection" (a live check) and a Drive browser (folders one level at a time with their
+ * files; "Load more" follows Google's page token) for confirming which folders graph8 can read.
+ * All reads. Nothing here changes a connection.
+ *
+ * SDK operations, in order:
+ *   1. getSlackStatus / getGoogleWorkspaceStatus / getRoamStatus   GET  /integrations/slack/status, /integrations/google-workspace, /integrations/roam/status   (read)
+ *   2. testGoogleWorkspaceConnection   POST /integrations/google-workspace/test               (read)
+ *   3. listGoogleDriveFolders          GET  /integrations/google-workspace/folders?parent_id&view&page_size&page_token   (read)
+ *   4. listGoogleDriveFolderFiles      GET  /integrations/google-workspace/folders/{folder_id}/files?page_size&page_token   (read)
+ */
+import { useEffect, useState } from "react";
+import { Folder } from "lucide-react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
+import { FactList } from "../lib/facts";
+import { GRAPH8_APP_INTEGRATIONS_PATH, looksConnected } from "../lib/integrations-utils";
+
+export interface WorkspaceToolsProps {
+  /** Where "Connect" sends people. Default: graph8 Settings > Integrations. */
+  connectUrl?: string;
+  className?: string;
+}
+
+interface DriveFolder { id: string; name: string }
+interface DriveFile { id: string; name: string; mimeType?: string; size?: string | number | null }
+const TOOLS = [
+  { key: "slack", label: "Slack", path: "/integrations/slack/status", note: "Send alerts and notifications to Slack channels." },
+  { key: "google", label: "Google Workspace", path: "/integrations/google-workspace", note: "Read Drive folders and use your Workspace account." },
+  { key: "roam", label: "Roam", path: "/integrations/roam/status", note: "Post to Roam groups and users." },
+] as const;
+const enc = encodeURIComponent;
+type Query = { data: unknown; error: unknown; loading: boolean; refetch: () => Promise<unknown> };
+
+/** One paged Drive list. Folders and files are separate queries, so each keeps its own page token (a token only works for the query that issued it). */
+function usePagedDrive<T>(path: string, key: string, field: "folders" | "files", extraQuery: Record<string, string | number>, enabled: boolean) {
+  const [acc, setAcc] = useState<T[]>([]);
+  const [token, setToken] = useState<string | undefined>();
+  const [next, setNext] = useState<string | undefined>();
+  useEffect(() => { setAcc([]); setToken(undefined); setNext(undefined); }, [key]);
+  const q = useG8Query((signal) => g8Get(path, { ...extraQuery, page_size: 50, page_token: token }, { signal }), [key, token], { enabled });
+  useEffect(() => {
+    const d = (q.data as { data?: Record<string, unknown> } | undefined)?.data;
+    if (!d || !Array.isArray(d[field])) return;
+    setAcc((prev) => (token ? [...prev, ...(d[field] as T[])] : (d[field] as T[])));
+    setNext((d.next_page_token as string | null | undefined) ?? undefined);
+  }, [q.data]); // eslint-disable-line react-hooks/exhaustive-deps
+  return { items: acc, next, loading: q.loading, error: q.error, refetch: q.refetch, more: () => next && setToken(next) };
+}
+
+function DriveBrowser() {
+  const [trail, setTrail] = useState<DriveFolder[]>([]);
+  const parent = trail[trail.length - 1]?.id ?? "root";
+  const folders = usePagedDrive<DriveFolder>("/integrations/google-workspace/folders", parent, "folders", { parent_id: parent, view: "my_drive" }, true);
+  const files = usePagedDrive<DriveFile>(`/integrations/google-workspace/folders/${enc(parent)}/files`, parent, "files", {}, parent !== "root");
+  const go = (t: DriveFolder[]) => setTrail(t);
+  return (
+    <div className="flex flex-col gap-2">
+      <nav aria-label="Folder path" className="flex flex-wrap items-center gap-1 text-sm">
+        <button type="button" className="underline" onClick={() => go([])}>My Drive</button>
+        {trail.map((f, i) => <span key={f.id}> / <button type="button" className="underline" onClick={() => go(trail.slice(0, i + 1))}>{f.name}</button></span>)}
+      </nav>
+      {folders.error ? <ApiError error={folders.error} title="Could not list the folders" onRetry={() => void folders.refetch()} /> : null}
+      {(folders.loading && folders.items.length === 0) ? <Skeleton className="h-10 w-full" /> : null}
+      <ul className="divide-y rounded-md border text-sm" aria-label="Folders">
+        {folders.items.map((f) => <li key={f.id}><button type="button" className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-accent" onClick={() => go([...trail, f])}><Folder className="size-4" aria-hidden />{f.name}</button></li>)}
+      </ul>
+      {folders.next ? <Button size="sm" variant="outline" className="self-start" loading={folders.loading} onClick={folders.more}>Load more folders</Button> : null}
+      {parent !== "root" ? (
+        <>
+          {files.error ? <ApiError compact error={files.error} title="Could not list the files" onRetry={() => void files.refetch()} /> : null}
+          <ul className="divide-y rounded-md border text-sm" aria-label="Files">
+            {files.items.map((f) => <li key={f.id} className="flex justify-between px-3 py-1.5"><span>{f.name}</span><span className="text-xs text-muted-foreground">{f.mimeType?.split(".").pop()}</span></li>)}
+          </ul>
+          {files.next ? <Button size="sm" variant="outline" className="self-start" loading={files.loading} onClick={files.more}>Load more files</Button> : null}
+        </>
+      ) : null}
+      {!folders.loading && !folders.error && folders.items.length === 0 && (parent === "root" || (!files.loading && files.items.length === 0)) ? <p className="text-sm text-muted-foreground">This folder is empty.</p> : null}
+    </div>
+  );
+}
+
+function ToolCard({ tool, connectUrl }: { tool: (typeof TOOLS)[number]; connectUrl: string }) {
+  const brand = useBrand();
+  const [drive, setDrive] = useState(false);
+  const status = useG8Query((signal) => g8Get(tool.path, undefined, { signal }), [tool.path]);
+  const test = useG8Mutation(() => g8Post("/integrations/google-workspace/test", {}));
+  const connected = looksConnected(status.data);
+  const verdict = (test.data as { data?: { success?: boolean; ok?: boolean; message?: string; error?: string } } | undefined)?.data;
+  const body = ((status.data as { data?: Record<string, unknown> } | undefined)?.data ?? {}) as Record<string, unknown>;
+  const facts = Object.fromEntries(Object.entries(body).filter(([k]) => !["connected", "is_connected"].includes(k)));
+  return (
+    <SectionCard title={tool.label} description={tool.note} actions={status.data ? <StatusPill tone={connected ? "positive" : "neutral"} dot>{connected ? "Connected" : "Not connected"}</StatusPill> : undefined}>
+      {status.error ? <ApiError error={status.error} title={`Could not check ${tool.label}`} onRetry={() => void status.refetch()} /> : null}
+      {status.loading && !status.data ? <Skeleton className="h-10 w-full" /> : null}
+      {status.data && !connected ? <a className="text-sm underline" href={connectUrl} target="_blank" rel="noreferrer">Connect {tool.label} in {brand.linkLabel}</a> : null}
+      {connected ? <FactList data={facts} empty="Connected." /> : null}
+      {connected && tool.key === "google" ? (
+        <div className="mt-3 flex flex-col gap-2">
+          <div className="flex flex-wrap items-center gap-2">
+            <Button size="sm" variant="outline" loading={test.loading} onClick={() => void test.mutate(undefined)}>Test connection</Button>
+            <Button size="sm" variant="outline" aria-expanded={drive} onClick={() => setDrive((v) => !v)}>{drive ? "Hide Drive" : "Browse Drive"}</Button>
+            {test.data !== undefined ? <span role="status" className="text-sm" data-testid="google-test">{verdict?.success === false || verdict?.ok === false ? `The test failed${verdict.message || verdict.error ? `: ${verdict.message ?? verdict.error}` : ""}` : "Google answered: the connection works."}</span> : null}
+          </div>
+          {test.error ? <ApiError error={test.error} title="The test could not run" /> : null}
+          {drive ? <DriveBrowser /> : null}
+        </div>
+      ) : null}
+    </SectionCard>
+  );
+}
+
+export function WorkspaceTools({ connectUrl: connectUrlProp, className }: WorkspaceToolsProps) {
+  const brand = useBrand();
+  const connectUrl = connectUrlProp ?? brandUrl(brand, GRAPH8_APP_INTEGRATIONS_PATH);
+  return <div className={`grid gap-4 md:grid-cols-2 ${className ?? ""}`}>{TOOLS.map((t) => <ToolCard key={t.key} tool={t} connectUrl={connectUrl} />)}</div>;
+}

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

@@ -0,0 +1,39 @@
+"use client";
+
+/** Helpers for reading records that come back in a CRM's own shape (HubSpot properties, Salesforce fields, Pipedrive values). */
+
+export type CrmRecord = Record<string, unknown> & { id?: string | number; properties?: Record<string, unknown> };
+
+const pick = (r: CrmRecord, keys: string[]): string => {
+  const sources: Array<Record<string, unknown>> = [r, (r.properties ?? {}) as Record<string, unknown>, ((r as { attributes?: Record<string, unknown> }).attributes ?? {}) as Record<string, unknown>];
+  for (const src of sources) for (const k of keys) { const v = src[k]; if (typeof v === "string" && v.trim()) return v; if (typeof v === "number") return String(v); }
+  return "";
+};
+
+/** A readable name for a CRM record of any kind. */
+export function crmRecordTitle(r: CrmRecord): string {
+  const first = pick(r, ["firstname", "first_name", "FirstName"]);
+  const last = pick(r, ["lastname", "last_name", "LastName"]);
+  return pick(r, ["name", "full_name", "Name", "dealname", "title", "subject"]) || [first, last].filter(Boolean).join(" ") || pick(r, ["email", "Email", "domain", "company"]) || String(r.id ?? "Record");
+}
+
+export function crmRecordSubtitle(r: CrmRecord): string {
+  return [pick(r, ["email", "Email"]), pick(r, ["company", "Company", "domain"]), pick(r, ["stage", "dealstage", "StageName", "status", "Status"])].filter(Boolean).join(" - ");
+}
+
+/** The record's own scalar fields (properties flattened in), for a detail view. Objects and empty values are left out. */
+export function flattenRecord(r: CrmRecord): Record<string, string> {
+  const out: Record<string, string> = {};
+  const add = (src: Record<string, unknown>) => { for (const [k, v] of Object.entries(src)) if ((typeof v === "string" && v) || typeof v === "number" || typeof v === "boolean") out[k] = String(v); };
+  add(r);
+  add((r.properties ?? {}) as Record<string, unknown>);
+  return out;
+}
+
+export const CRM_ENTITIES = [
+  { id: "contacts", label: "Contacts" },
+  { id: "companies", label: "Companies" },
+  { id: "deals", label: "Deals" },
+  { id: "leads", label: "Leads" },
+] as const;
+export type CrmEntity = (typeof CRM_ENTITIES)[number]["id"];

package/blocks/integrations/lib/facts.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+/** Renders an open-shaped API object (health, scorecard, status) as labelled facts without guessing its fields. */
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+
+const label = (k: string): string => { const t = k.replace(/_/g, " "); return t.charAt(0).toUpperCase() + t.slice(1); };
+const show = (v: unknown): string => (v == null ? "" : typeof v === "string" ? v : typeof v === "number" || typeof v === "boolean" ? String(v) : JSON.stringify(v));
+
+export function FactList({ data, empty = "Nothing reported yet." }: { data: unknown; empty?: string }) {
+  const entries = Object.entries((data && typeof data === "object" && !Array.isArray(data) ? data : {}) as Record<string, unknown>).filter(([, v]) => v != null && v !== "");
+  if (entries.length === 0) return <p className="text-sm text-muted-foreground">{empty}</p>;
+  return <KeyValueList columns={2} items={entries.map(([k, v]) => ({ label: label(k), value: show(v), wide: typeof v === "object", mono: typeof v === "object" }))} />;
+}

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

@@ -7,6 +7,11 @@ 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];
 
+/** The connection type the API expects (`CrmConnectionType`): Zoho is `zoho-crm`, the others are their own id. */
+export function crmType(provider: string): string {
+  return provider === "zoho" ? "zoho-crm" : provider;
+}
+
 export const PROVIDER_LABELS: Record<CrmProvider, string> = {
   hubspot: "HubSpot",
   salesforce: "Salesforce",

package/blocks/integrations/lib/load-more.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+/**
+ * Paging helpers for the agents block, in the same shape as the foundation's paging primitives (a list never stops silently at a
+ * cap: it shows "Load more" while the last page was full).
+ *
+ *   useLoadMoreList   offset + limit APIs (the next page starts at items.length).
+ *   useGrowingList    limit-only APIs (a bigger limit refetches the list from the start).
+ *   LoadMore          the footer button plus the error of a failed "more" request.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+
+export interface LoadMoreList<T> {
+  items: T[];
+  /** The first page is loading (or reloading after the deps changed). */
+  loading: boolean;
+  loadingMore: boolean;
+  error: unknown;
+  moreError: unknown;
+  hasMore: boolean;
+  /** A limit-only API stopped at its own maximum: there are more rows the API will not return. */
+  capped?: boolean;
+  loadMore: () => void;
+  reload: () => void;
+}
+
+interface Options {
+  pageSize?: number;
+  enabled?: boolean;
+  /** useGrowingList: the largest `limit` the API accepts. */
+  max?: number;
+}
+
+/** Offset paging. `fetchPage(offset, limit)` returns that page's rows; a full page means there may be more. */
+export function useLoadMoreList<T>(
+  fetchPage: (offset: number, limit: number, signal: AbortSignal) => Promise<T[]>,
+  deps: readonly unknown[],
+  { pageSize = 50, enabled = true }: Options = {},
+): LoadMoreList<T> {
+  const [items, setItems] = useState<T[]>([]);
+  const [loading, setLoading] = useState(enabled);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<unknown>(null);
+  const [moreError, setMoreError] = useState<unknown>(null);
+  const [hasMore, setHasMore] = useState(false);
+  const [tick, setTick] = useState(0);
+  const fetchRef = useRef(fetchPage);
+  fetchRef.current = fetchPage;
+  const gen = useRef(0);
+  const count = useRef(0);
+  const sig = JSON.stringify([...deps, enabled, pageSize]);
+  const lastSig = useRef(sig);
+
+  useEffect(() => {
+    if (!enabled) { setLoading(false); return; }
+    const mine = ++gen.current;
+    const ctl = new AbortController();
+    // A reload() keeps showing the rows it has until the fresh first page lands; a changed filter starts from nothing.
+    const fresh = lastSig.current !== sig;
+    lastSig.current = sig;
+    setLoading(true); setError(null); setMoreError(null);
+    if (fresh) { setItems([]); setHasMore(false); count.current = 0; }
+    // A reload() refetches as many pages as were showing, so a row opened from page 2 does not vanish; a changed filter starts at page 1.
+    const want = fresh ? pageSize : Math.max(count.current, pageSize);
+    const load = async (): Promise<T[]> => {
+      const all: T[] = [];
+      let last = pageSize;
+      while (all.length < want && last >= pageSize) {
+        const page = await fetchRef.current(all.length, pageSize, ctl.signal);
+        all.push(...page);
+        last = page.length;
+      }
+      return all;
+    };
+    load().then((rows) => {
+      if (gen.current !== mine) return;
+      setItems(rows); count.current = rows.length; setHasMore(rows.length > 0 && rows.length % pageSize === 0); setLoading(false);
+    }, (e) => { if (gen.current === mine) { setError(e); setLoading(false); } });
+    return () => ctl.abort();
+  }, [...deps, enabled, pageSize, tick]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const loadMore = useCallback(() => {
+    const mine = gen.current;
+    setLoadingMore(true); setMoreError(null);
+    fetchRef.current(count.current, pageSize, new AbortController().signal).then((rows) => {
+      if (gen.current !== mine) return;
+      count.current += rows.length;
+      setItems((prev) => [...prev, ...rows]); setHasMore(rows.length >= pageSize); setLoadingMore(false);
+    }, (e) => { if (gen.current === mine) { setMoreError(e); setLoadingMore(false); } });
+  }, [pageSize]);
+
+  return { items, loading, loadingMore, error, moreError, hasMore, loadMore, reload: () => setTick((t) => t + 1) };
+}
+
+/** Limit-only APIs: asks for `step` rows, and "Load more" asks again for `step` more from the start. */
+export function useGrowingList<T>(
+  fetchRows: (limit: number, signal: AbortSignal) => Promise<T[]>,
+  deps: readonly unknown[],
+  { pageSize = 50, enabled = true, max = Infinity }: Options = {},
+): LoadMoreList<T> {
+  const [limit, setLimit] = useState(pageSize);
+  const [rows, setRows] = useState<T[]>([]);
+  const [loading, setLoading] = useState(enabled);
+  const [error, setError] = useState<unknown>(null);
+  const [tick, setTick] = useState(0);
+  const [growing, setGrowing] = useState(false);
+  const fetchRef = useRef(fetchRows);
+  fetchRef.current = fetchRows;
+  const depKey = JSON.stringify(deps);
+  const lastDeps = useRef(depKey);
+
+  useEffect(() => { if (lastDeps.current !== depKey) { lastDeps.current = depKey; setLimit(pageSize); } }, [depKey, pageSize]);
+  useEffect(() => {
+    if (!enabled) { setLoading(false); return; }
+    let live = true;
+    const ctl = new AbortController();
+    setLoading(true); setError(null);
+    fetchRef.current(limit, ctl.signal).then((r) => { if (live) { setRows(r); setLoading(false); setGrowing(false); } }, (e) => { if (live) { setError(e); setLoading(false); setGrowing(false); } });
+    return () => { live = false; ctl.abort(); };
+  }, [limit, depKey, enabled, tick]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    items: rows, loading: loading && !growing, loadingMore: loading && growing, error: growing ? null : error, moreError: growing ? error : null,
+    hasMore: !loading && rows.length >= limit && limit < max, capped: !loading && rows.length >= limit && limit >= max,
+    loadMore: () => { setGrowing(true); setLimit((l) => Math.min(max, l + pageSize)); }, reload: () => setTick((t) => t + 1),
+  };
+}
+
+/** The footer of a paged list. Renders nothing when everything is shown. */
+export function LoadMore<T>({ list, noun = "rows" }: { list: LoadMoreList<T>; noun?: string }) {
+  if (!list.hasMore && !list.moreError && !list.capped) return null;
+  return (
+    <div className="flex flex-col items-center gap-2 py-2">
+      {list.moreError ? <ApiError compact error={list.moreError} title={`Could not load more ${noun}`} onRetry={list.loadMore} /> : null}
+      {list.capped ? <p className="text-xs text-muted-foreground">Showing the latest {list.items.length} {noun}. The API returns no more than this.</p> : null}
+      {list.hasMore && !list.moreError ? <Button size="sm" variant="outline" loading={list.loadingMore} onClick={list.loadMore}>Load more {noun}</Button> : null}
+    </div>
+  );
+}

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

@@ -36,7 +36,7 @@ function Coverage({ account }: { account: AbmAccount }) {
         <li
           key={category}
           title={`${cov.contact_count ?? 0} contacts, ${cov.signal_count ?? 0} signals`}
-          className="rounded border border-gray-200 px-1.5 py-0.5 text-xs text-gray-700"
+          className="rounded border border-border px-1.5 py-0.5 text-xs text-foreground"
         >
           {category}: {cov.barometer ?? "none"}
         </li>
@@ -52,9 +52,9 @@ function Badge({ account, compact }: { account: AbmAccount; compact?: boolean })
       <div className="flex items-center gap-2">
         <span className={`rounded px-2 py-0.5 text-xs font-medium ${strengthClass(account.account_strength)}`}>{label}</span>
         {account.is_high_intent ? (
-          <span className="rounded bg-red-100 px-2 py-0.5 text-xs font-medium text-red-800">High intent</span>
+          <span className="rounded bg-error px-2 py-0.5 text-xs font-medium text-error-foreground">High intent</span>
         ) : null}
-        <span className="text-xs text-gray-500">{account.total_signal_count ?? 0} signals</span>
+        <span className="text-xs text-muted-foreground">{account.total_signal_count ?? 0} signals</span>
       </div>
       {compact ? null : <Coverage account={account} />}
     </div>
@@ -69,7 +69,7 @@ export function AccountIntentScore({ companyIds, days = 30, compact, className }
     const status = (error as { status?: number }).status;
     const text = status === 403 ? "Intent scoring is not enabled for this workspace." : "Could not load intent.";
     return (
-      <span role="alert" className={`text-xs text-red-700 ${className ?? ""}`}>
+      <span role="alert" className={`text-xs text-error-foreground ${className ?? ""}`}>
         {text}
       </span>
     );
@@ -81,7 +81,7 @@ export function AccountIntentScore({ companyIds, days = 30, compact, className }
         return account ? (
           <Badge key={id} account={{ ...account, company_id: id }} compact={compact} />
         ) : (
-          <span key={id} className="block text-xs text-gray-500">
+          <span key={id} className="block text-xs text-muted-foreground">
             No signal
           </span>
         );

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

@@ -59,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) => {
@@ -76,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>
@@ -132,7 +132,7 @@ 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">
+        <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 ? (
@@ -167,16 +167,16 @@ export function IntentFeed({ days = 30, keywordIds, pageSize = 25, refreshSecond
               >
                 <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>
@@ -195,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

@@ -185,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}
@@ -198,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"
@@ -228,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}
@@ -301,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/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/components/account-related.tsx

@@ -13,6 +13,7 @@ import { useState } from "react";
 import { Radar } from "lucide-react";
 import { Button, Skeleton } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
+import { FirstNotice } from "@/g8/components/paging-notices";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
 import { EmptyState } from "@/g8/components/empty-state";
 import { SectionCard } from "@/g8/components/screen/section-card";
@@ -42,8 +43,11 @@ export function AccountBriefTab({ companyId, name }: { companyId: number; name?:
   );
 }
 
+/** The signals API has no paging: a full read is announced under the list. */
+const SIGNAL_LIMIT = 20;
+
 export function AccountSignalsTab({ companyId }: { companyId: number }) {
-  const q = useG8Query((signal) => g8Get(`/accounts/${companyId}/intent-signals`, { limit: 20 }, { signal }), [companyId]);
+  const q = useG8Query((signal) => g8Get(`/accounts/${companyId}/intent-signals`, { limit: SIGNAL_LIMIT }, { signal }), [companyId]);
   if (q.error) return <ApiError error={q.error} title="Could not load signals" onRetry={() => void q.refetch()} />;
   if (q.loading && !q.data) return <Skeleton className="h-24 w-full" aria-label="Loading signals" />;
   const payload = body(q.data);
@@ -51,6 +55,7 @@ export function AccountSignalsTab({ companyId }: { companyId: number }) {
   const signals = raw.map(asRec);
   if (signals.length === 0) return <EmptyState icon={<Radar className="size-8" />} title="Quiet" description="No recent buying or activity signals for this account." />;
   return (
+    <>
     <ul className="divide-y rounded-md border" aria-label="Signals">
       {signals.map((s, i) => {
         const when = text(s.detected_at ?? s.created_at ?? s.occurred_at);
@@ -62,5 +67,7 @@ export function AccountSignalsTab({ companyId }: { companyId: number }) {
         );
       })}
     </ul>
+      <FirstNotice shown={signals.length} limit={SIGNAL_LIMIT} noun="signals" />
+    </>
   );
 }

package/blocks/lifecycle/components/churn-list.tsx

@@ -35,15 +35,18 @@ export interface ChurnListProps {
 }
 
 /** Loaded on click: one call per row up front would be 25 calls for a page the person may only skim. */
+/** The signals API has no paging: a full read is shown as "20+ recent signals". */
+const SIGNAL_LIMIT = 20;
+
 function Intent({ companyId }: { companyId: number }) {
   const [asked, setAsked] = useState(false);
-  const q = useG8Query((signal) => g8Get(`/accounts/${companyId}/intent-signals`, { limit: 20 }, { signal }), [companyId], { enabled: asked });
+  const q = useG8Query((signal) => g8Get(`/accounts/${companyId}/intent-signals`, { limit: SIGNAL_LIMIT }, { signal }), [companyId], { enabled: asked });
   if (!asked) return <Button size="sm" variant="ghost" aria-label={`Check activity for ${companyId}`} onClick={() => setAsked(true)}>Check</Button>;
   if (q.loading) return <Skeleton className="h-4 w-16" />;
   if (q.error) return <span className="text-muted-foreground text-xs">n/a</span>;
   const payload = body(q.data);
   const signals = Array.isArray(payload) ? payload : Array.isArray(asRec(payload).signals) ? (asRec(payload).signals as unknown[]) : [];
-  return <span className="text-xs">{signals.length ? `${signals.length} recent signals` : "Quiet"}</span>;
+  return <span className="text-xs">{signals.length ? `${signals.length}${signals.length >= SIGNAL_LIMIT ? "+" : ""} recent signals` : "Quiet"}</span>;
 }
 
 export function ChurnList({ stageSlug = "churned", winBackSlug = "leads", onOpenCompany, pageSize = 25, className }: ChurnListProps) {

package/blocks/lifecycle/components/customer-table.tsx

@@ -41,7 +41,7 @@ function Summary() {
   return (
     <div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-4" data-testid="revenue-summary">
       {tiles.map(([key, value]) => (
-        <Card key={key}><CardContent className="p-4"><div className="text-2xl font-semibold">{value.toLocaleString()}</div><div className="text-muted-foreground text-xs capitalize">{key.replace(/_count$/, "").replace(/_/g, " ")}</div></CardContent></Card>
+        <Card key={key}><CardContent className="p-4"><div className="text-2xl font-medium">{value.toLocaleString()}</div><div className="text-muted-foreground text-xs capitalize">{key.replace(/_count$/, "").replace(/_/g, " ")}</div></CardContent></Card>
       ))}
     </div>
   );

package/blocks/lists/README.md

@@ -39,7 +39,7 @@ and `contacts:read/write`. The screens use the foundation screen kit (`component
    shows `ready_count / warned / blocked` and retries with `conflict_resolution: "skip_all" | "add_all"`.
 4. **Members**: `ContactTable listId={id}` (or `GET /contacts?list_id=`). Removing uses
    `DELETE /lists/{list_id}/contacts { contact_ids }`; contacts are never deleted by it.
-5. **Suppress**: `POST /contacts/suppressions/bulk-add { contact_ids, channel, reason }`; read back with
+5. **Suppress**: pick people by name with the `ContactPicker` (pickers block) (no ids to type; pasting ids stays under "Paste ids instead"), then `POST /contacts/suppressions/bulk-add { contact_ids, channel, reason }`; read back with
    `GET /contacts/suppressions`. The ledger has ids only (no names or emails): open the contact for details.
 6. **Reinstate**: `POST /contacts/suppressions/reinstate { contact_ids }`. Contacts who unsubscribed themselves
    can be refused; the answer lists them in `skipped`.
@@ -107,3 +107,9 @@ Ask the person: who may reinstate suppressed contacts (decide it in the proxy's
 | checkContactSuppression | GET /contacts/{contact_id}/suppression | read | SuppressionManager |
 | reinstateSuppressions | POST /contacts/suppressions/reinstate | write | SuppressionManager |
 | refreshDynamicList, checkListIntegrity | POST /lists/{id}/refresh, /lists/{id}/integrity-check | write, read | recipes |
+
+## Cross-block glue
+
+- `AddCompanyPeopleToListButton` (`components/add-company-people-to-list-button.tsx`): "Add people to list" for companies. Lists hold contacts, so it reads the people at the companies (`GET /contacts?company_id=`, up to 500) and opens `AddToListButton` for them. `AddToListButton` gains optional `defaultOpen`, `hideTrigger` and `onClosed`; `ListsScreen` gains optional `onOpenContact` so list members open in your contacts screen.
+
+- `RecordListsTab` (`components/record-lists-tab.tsx`): the lists one contact belongs to (`getContactLists`), with `AddToListButton` and a confirmed Remove (`removeContactsFromList`, destructive). `extraDetailTabs` entry for ContactsScreen: `{ id: "lists", label: "Lists", render: (c) => <RecordListsTab contactId={c.id} onOpenList={(id) => router.push(`/lists?id=${id}`)} /> }`.