@graph8/sdk 0.361.0 → 0.370.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graph8/sdk",
-  "version": "0.361.0",
+  "version": "0.370.0",
   "description": "graph8 SDK - CRM, enrichment, sequences, campaigns, and tracking for B2B",
   "license": "MIT",
   "author": "graph8 <support@graph8.com> (https://graph8.com)",
@@ -49,6 +49,11 @@
       "import": "./dist/react.mjs",
       "require": "./dist/react.js"
     },
+    "./errors": {
+      "types": "./dist/errors.d.ts",
+      "import": "./dist/errors.mjs",
+      "require": "./dist/errors.js"
+    },
     "./ui": {
       "types": "./dist/ui/index.d.ts",
       "import": "./dist/ui/index.mjs",
@@ -63,6 +68,11 @@
     "./ui/theme.css": "./styles/theme.css",
     "./ui/styles.css": "./styles/styles.css"
   },
+  "sideEffects": [
+    "*.css",
+    "./dist/*.js",
+    "./dist/*.mjs"
+  ],
   "files": [
     "dist",
     "blocks",
@@ -73,8 +83,9 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsup && npm run build:ui && npm run build:types && npm run docs:agents",
+    "build": "node scripts/clean-dist.mjs && tsup && npm run build:ui && npm run build:types && npm run docs:agents",
     "test": "vitest run",
+    "validate:blocks": "vite-node --script scripts/blocks/validate.ts",
     "dev": "tsup --watch",
     "prepublishOnly": "npm run build",
     "generate": "node scripts/generate-from-contract.mjs",
@@ -83,6 +94,9 @@
     "build:types": "node scripts/emit-module-types.mjs",
     "docs:agents": "vite-node scripts/agent-docs/cli.ts",
     "e2e:create": "node scripts/e2e-create.mjs",
+    "e2e:flows": "node scripts/e2e-flows.mjs",
+    "mock:graph8": "node scripts/mock-graph8/server.mjs",
+    "mock:graph8:coverage": "node scripts/mock-graph8/coverage.mjs",
     "generate:ui": "node scripts/sync-ui.mjs",
     "generate:ui:check": "node scripts/sync-ui.mjs --check",
     "build:ui": "tsup --config tsup.ui.config.ts && node scripts/postbuild-ui.mjs && node scripts/build-ui-css.mjs"

package/stacks/6sense.json

@@ -2,7 +2,7 @@
   "$schema": "./stack.schema.json",
   "id": "6sense",
   "title": "6sense-style account intelligence",
-  "summary": "Buyer intent, website visitor identification and competitor tracking on top of the CRM.",
+  "summary": "Intent, website visitors and competitor tracking on top of your accounts and contacts.",
   "status": "available",
   "blocks": [
     "foundation",
@@ -11,36 +11,61 @@
     "visitors",
     "radar"
   ],
+  "home": "/intent",
   "nav": [
-    {
-      "label": "Contacts",
-      "path": "/contacts",
-      "block": "crm",
-      "component": "ContactTable"
-    },
-    {
-      "label": "Companies",
-      "path": "/companies",
-      "block": "crm",
-      "component": "CompanyTable"
-    },
     {
       "label": "Intent",
       "path": "/intent",
       "block": "intent",
-      "component": "IntentFeed"
+      "component": "IntentScreen",
+      "icon": "Radar",
+      "group": "Signals",
+      "description": "Accounts showing buying intent"
     },
     {
       "label": "Visitors",
       "path": "/visitors",
       "block": "visitors",
-      "component": "VisitorFeed"
+      "component": "VisitorsScreen",
+      "icon": "Eye",
+      "group": "Signals",
+      "description": "Who is on your website right now"
     },
     {
       "label": "Competitors",
       "path": "/competitors",
       "block": "radar",
-      "component": "CompetitorTracker"
+      "component": "RadarScreen",
+      "icon": "Crosshair",
+      "group": "Signals",
+      "description": "Track competitors and market moves"
+    },
+    {
+      "label": "Companies",
+      "path": "/companies",
+      "block": "crm",
+      "component": "CompaniesScreen",
+      "icon": "Building2",
+      "group": "Prospect",
+      "description": "Accounts and the people at them"
+    },
+    {
+      "label": "Contacts",
+      "path": "/contacts",
+      "block": "crm",
+      "component": "ContactsScreen",
+      "icon": "Users",
+      "group": "Prospect",
+      "description": "People you sell to, with notes, tasks and activity"
+    },
+    {
+      "label": "Tasks",
+      "path": "/tasks",
+      "block": "crm",
+      "component": "TasksScreen",
+      "icon": "CheckSquare",
+      "group": "Work",
+      "description": "Follow-ups due across your records"
     }
   ]
 }

package/stacks/apollo/pages/companies.tsx.tmpl

@@ -0,0 +1,50 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import Link from "next/link";
+import { Skeleton } from "@graph8/sdk/ui";
+import { Handshake } from "lucide-react";
+import { ApiError } from "@/components/g8/_foundation/api-error";
+import { EmptyState } from "@/components/g8/_foundation/empty-state";
+import { useG8Query } from "@/components/g8/_foundation/hooks/use-g8-query";
+import { g8Get } from "@/components/g8/_foundation/lib/g8-client";
+import { CompaniesScreen } from "@/components/g8/crm/companies-screen";
+import { EnrichButton } from "@/components/g8/enrichment/enrich-button";
+import { dataOf, formatMoney } from "@/components/g8/deals/lib/deals-types";
+
+/** One row of GET /contacts/{id}/deals and GET /companies/{id}/deals (the API's ContactDealResponse). */
+interface LinkedDeal { deal_id?: string | null; name?: string | null; stage?: string | null; value?: number | null; currency?: string | null; role?: string | null }
+
+/** The deals linked to one contact or company, each opening in the Deals page. */
+function LinkedDeals({ kind, id }: { kind: "contacts" | "companies"; id: number }) {
+  const q = useG8Query(async (signal) => {
+    const inner = dataOf<{ items?: LinkedDeal[] } | LinkedDeal[]>(await g8Get(`/${kind}/${id}/deals`, undefined, { signal }));
+    return (Array.isArray(inner) ? inner : (inner.items ?? [])).filter((d) => d.deal_id);
+  }, [kind, id]);
+  if (q.error) return <ApiError error={q.error} title="Could not load deals" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading deals" />;
+  if (q.data.length === 0) return <EmptyState compact icon={<Handshake className="size-8" />} title="No deals yet" description="Deals linked to this record show up here." />;
+  return (
+    <ul className="divide-y rounded-md border" aria-label="Deals">
+      {q.data.map((d) => (
+        <li key={d.deal_id}>
+          <Link href={`/deals?id=${encodeURIComponent(d.deal_id as string)}`} className="flex items-center justify-between gap-3 p-3 text-sm hover:bg-muted">
+            <span className="min-w-0 truncate font-medium">{d.name || "Untitled deal"}</span>
+            <span className="shrink-0 text-xs text-muted-foreground">{[d.stage, d.value != null ? formatMoney(d.value, d.currency) : null].filter(Boolean).join(" · ")}</span>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default function Page() {
+  return (
+    <CompaniesScreen
+      renderRowActions={(c, { reload }) => <EnrichButton kind="company" lookup={{ domain: c.domain ?? undefined, name: c.name ?? undefined }} record={{ ...c }} onApplied={reload} label="Enrich" size="sm" variant="ghost" />}
+      renderDetailActions={(c, { reload }) => <EnrichButton kind="company" lookup={{ domain: c.domain ?? undefined, name: c.name ?? undefined }} record={{ ...c }} onApplied={reload} label="Enrich" />}
+      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="companies" id={c.id} /> }]}
+    />
+  );
+}

package/stacks/apollo/pages/contacts.tsx.tmpl

@@ -0,0 +1,117 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { useState } from "react";
+import Link from "next/link";
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton } from "@graph8/sdk/ui";
+import { Handshake, ListPlus } from "lucide-react";
+import { ApiError } from "@/components/g8/_foundation/api-error";
+import { EmptyState } from "@/components/g8/_foundation/empty-state";
+import { useG8Query } from "@/components/g8/_foundation/hooks/use-g8-query";
+import { g8Get } from "@/components/g8/_foundation/lib/g8-client";
+import { ContactsScreen } from "@/components/g8/crm/contacts-screen";
+import { CallContactButton } from "@/components/g8/dialer/call-contact-button";
+import { EnrichButton } from "@/components/g8/enrichment/enrich-button";
+import { dataOf, formatMoney } from "@/components/g8/deals/lib/deals-types";
+import { EnrollDialog } from "@/components/g8/sequencer/enroll-dialog";
+import { listOf, statusGroup, type SequenceRow } from "@/components/g8/sequencer/lib/sequencer-utils";
+
+/** Every active sequence, paging through the whole list (the API answers one page at a time). */
+async function activeSequences(signal: AbortSignal): Promise<SequenceRow[]> {
+  const out: SequenceRow[] = [];
+  for (let page = 1; page <= 50; page++) {
+    const env = await g8Get("/sequences", { page, limit: 100 }, { signal });
+    const rows = listOf<SequenceRow>(env);
+    out.push(...rows.filter((s) => statusGroup(s.status) === "live"));
+    const more = (env as { pagination?: { has_next?: boolean } }).pagination?.has_next;
+    if (!more || rows.length === 0) break;
+  }
+  return out;
+}
+
+/** Pick a sequence, then enroll the contacts in it. The enroll dialog shows the sending preflight before anything is sent. */
+function AddToSequence({ contactIds, onEnrolled, variant = "outline" }: { contactIds: number[]; onEnrolled?: () => void; variant?: "outline" | "default" }) {
+  const [step, setStep] = useState<"closed" | "pick" | "enroll">("closed");
+  const [sequenceId, setSequenceId] = useState("");
+  const sequences = useG8Query(activeSequences, [], { enabled: step === "pick" });
+  const chosen = (sequences.data ?? []).find((s) => s.id === sequenceId);
+  return (
+    <>
+      <Button size="sm" variant={variant} disabled={contactIds.length === 0} onClick={() => { setSequenceId(""); setStep("pick"); }}>
+        <ListPlus className="mr-1 size-4" aria-hidden />
+        Add to sequence
+      </Button>
+      <Sheet open={step === "pick"} onOpenChange={(o) => { if (!o) setStep("closed"); }}>
+        <SheetContent className="w-full sm:max-w-md">
+          <SheetHeader>
+            <SheetTitle>Add to sequence</SheetTitle>
+            <SheetDescription>{contactIds.length === 1 ? "1 contact" : `${contactIds.length} contacts`} will be enrolled in the sequence you pick.</SheetDescription>
+          </SheetHeader>
+          <div className="space-y-3 p-4">
+            {sequences.error ? <ApiError error={sequences.error} title="Could not load sequences" onRetry={() => void sequences.refetch()} /> : null}
+            {sequences.loading && !sequences.data ? <Skeleton className="h-9 w-full" aria-label="Loading sequences" /> : null}
+            {sequences.data && sequences.data.length === 0 ? <EmptyState compact title="No active sequences" description="Launch a sequence on the Sequences page first." /> : null}
+            {sequences.data && sequences.data.length > 0 ? (
+              <>
+                <label htmlFor="enroll-sequence" className="text-sm font-medium">Sequence</label>
+                <select id="enroll-sequence" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={sequenceId} onChange={(e) => setSequenceId(e.target.value)}>
+                  <option value="">Choose a sequence</option>
+                  {sequences.data.map((s) => <option key={s.id} value={s.id}>{s.name || s.id}</option>)}
+                </select>
+                <Button disabled={!sequenceId} onClick={() => setStep("enroll")}>Continue</Button>
+              </>
+            ) : null}
+          </div>
+        </SheetContent>
+      </Sheet>
+      {step === "enroll" && chosen ? (
+        <EnrollDialog open sequenceId={chosen.id} sequenceName={chosen.name ?? undefined} contactIds={contactIds} onClose={() => setStep("closed")} onEnrolled={() => { setStep("closed"); onEnrolled?.(); }} />
+      ) : null}
+    </>
+  );
+}
+
+/** One row of GET /contacts/{id}/deals and GET /companies/{id}/deals (the API's ContactDealResponse). */
+interface LinkedDeal { deal_id?: string | null; name?: string | null; stage?: string | null; value?: number | null; currency?: string | null; role?: string | null }
+
+/** The deals linked to one contact or company, each opening in the Deals page. */
+function LinkedDeals({ kind, id }: { kind: "contacts" | "companies"; id: number }) {
+  const q = useG8Query(async (signal) => {
+    const inner = dataOf<{ items?: LinkedDeal[] } | LinkedDeal[]>(await g8Get(`/${kind}/${id}/deals`, undefined, { signal }));
+    return (Array.isArray(inner) ? inner : (inner.items ?? [])).filter((d) => d.deal_id);
+  }, [kind, id]);
+  if (q.error) return <ApiError error={q.error} title="Could not load deals" onRetry={() => void q.refetch()} />;
+  if (!q.data) return <Skeleton className="h-24 w-full" aria-label="Loading deals" />;
+  if (q.data.length === 0) return <EmptyState compact icon={<Handshake className="size-8" />} title="No deals yet" description="Deals linked to this record show up here." />;
+  return (
+    <ul className="divide-y rounded-md border" aria-label="Deals">
+      {q.data.map((d) => (
+        <li key={d.deal_id}>
+          <Link href={`/deals?id=${encodeURIComponent(d.deal_id as string)}`} className="flex items-center justify-between gap-3 p-3 text-sm hover:bg-muted">
+            <span className="min-w-0 truncate font-medium">{d.name || "Untitled deal"}</span>
+            <span className="shrink-0 text-xs text-muted-foreground">{[d.stage, d.value != null ? formatMoney(d.value, d.currency) : null].filter(Boolean).join(" · ")}</span>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export default function Page() {
+  return (
+    <ContactsScreen
+      renderRowActions={(c, { reload }) => <EnrichButton kind="person" lookup={{ email: c.work_email ?? undefined, linkedin_url: c.linkedin_url ?? undefined, first_name: c.first_name ?? undefined, last_name: c.last_name ?? undefined }} record={{ ...c }} onApplied={reload} label="Enrich" size="sm" variant="ghost" />}
+      renderBulkActions={({ ids, clear }) => <AddToSequence contactIds={ids} onEnrolled={clear} />}
+      renderDetailActions={(c, { reload }) => (
+        <>
+          <EnrichButton kind="person" lookup={{ email: c.work_email ?? undefined, linkedin_url: c.linkedin_url ?? undefined, first_name: c.first_name ?? undefined, last_name: c.last_name ?? undefined }} record={{ ...c }} onApplied={reload} label="Enrich" />
+          <AddToSequence contactIds={[c.id]} />
+          {/* One call to this contact through the dialer; confirmed, and your softphone joins it. */}
+          <CallContactButton contact={{ id: c.id, first_name: c.first_name, last_name: c.last_name, full_name: c.full_name, email: c.work_email, company: c.company_name, mobile_phone: c.mobile_phone, direct_phone: c.direct_phone }} />
+        </>
+      )}
+      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="contacts" id={c.id} /> }]}
+    />
+  );
+}

package/stacks/apollo.json

@@ -2,7 +2,7 @@
   "$schema": "./stack.schema.json",
   "id": "apollo",
   "title": "Apollo-style prospecting",
-  "summary": "Find, enrich and contact prospects: contacts, lists, search, enrichment, intent, sequences, inbox, dialer, deals and analytics.",
+  "summary": "Find, enrich and contact prospects: contacts, lists, search, enrichment, intent, sequences, campaigns, inbox, dialer, deals and analytics.",
   "status": "available",
   "blocks": [
     "foundation",
@@ -14,6 +14,7 @@
     "visitors",
     "mailboxes",
     "sequencer",
+    "campaigns",
     "inbox",
     "dialer",
     "appointments",
@@ -21,108 +22,189 @@
     "analytics",
     "integrations"
   ],
+  "home": "/analytics",
   "nav": [
+    {
+      "label": "Analytics",
+      "path": "/analytics",
+      "block": "analytics",
+      "component": "AnalyticsScreen",
+      "icon": "BarChart3",
+      "group": "Insights",
+      "description": "Pipeline, engagement and team KPIs"
+    },
+    {
+      "label": "Prospect search",
+      "path": "/prospect-search",
+      "block": "search",
+      "component": "ProspectSearchScreen",
+      "icon": "Search",
+      "group": "Prospect",
+      "description": "Find new people and companies, then save them"
+    },
     {
       "label": "Contacts",
       "path": "/contacts",
       "block": "crm",
-      "component": "ContactTable"
+      "component": "ContactsScreen",
+      "icon": "Users",
+      "group": "Prospect",
+      "description": "People you sell to, with notes, tasks and activity",
+      "page": "pages/contacts.tsx.tmpl"
     },
     {
       "label": "Companies",
       "path": "/companies",
       "block": "crm",
-      "component": "CompanyTable"
+      "component": "CompaniesScreen",
+      "icon": "Building2",
+      "group": "Prospect",
+      "description": "Accounts and the people at them",
+      "page": "pages/companies.tsx.tmpl"
     },
     {
       "label": "Lists",
       "path": "/lists",
       "block": "lists",
-      "component": "ListTable"
-    },
-    {
-      "label": "Suppressions",
-      "path": "/suppressions",
-      "block": "lists",
-      "component": "SuppressionManager"
-    },
-    {
-      "label": "Prospect search",
-      "path": "/prospect-search",
-      "block": "search",
-      "component": "ProspectResults"
+      "component": "ListsScreen",
+      "icon": "ListChecks",
+      "group": "Prospect",
+      "description": "Saved audiences you can sequence or sync"
     },
     {
       "label": "Enrichment",
       "path": "/enrichment",
       "block": "enrichment",
-      "component": "BulkEnrichPanel"
+      "component": "EnrichmentScreen",
+      "icon": "Sparkles",
+      "group": "Prospect",
+      "description": "Fill in emails, phones and firmographics"
     },
     {
       "label": "Intent",
       "path": "/intent",
       "block": "intent",
-      "component": "IntentFeed"
+      "component": "IntentScreen",
+      "icon": "Radar",
+      "group": "Signals",
+      "description": "Accounts showing buying intent"
     },
     {
       "label": "Visitors",
       "path": "/visitors",
       "block": "visitors",
-      "component": "VisitorFeed"
-    },
-    {
-      "label": "Mailboxes",
-      "path": "/mailboxes",
-      "block": "mailboxes",
-      "component": "MailboxList"
+      "component": "VisitorsScreen",
+      "icon": "Eye",
+      "group": "Signals",
+      "description": "Who is on your website right now"
     },
     {
       "label": "Sequences",
       "path": "/sequences",
       "block": "sequencer",
-      "component": "SequenceList"
+      "component": "SequencesScreen",
+      "icon": "Workflow",
+      "group": "Engage",
+      "description": "Multi-step outreach cadences"
+    },
+    {
+      "label": "Campaigns",
+      "path": "/campaigns",
+      "block": "campaigns",
+      "component": "CampaignsScreen",
+      "icon": "Rocket",
+      "group": "Engage",
+      "description": "Campaigns from brief to launch"
     },
     {
       "label": "Inbox",
       "path": "/inbox",
       "block": "inbox",
-      "component": "InboxList"
+      "component": "InboxScreen",
+      "icon": "Inbox",
+      "group": "Engage",
+      "description": "Replies from every channel in one place"
     },
     {
       "label": "Dialer",
       "path": "/dialer",
       "block": "dialer",
-      "component": "CallQueue"
+      "component": "DialerScreen",
+      "icon": "Phone",
+      "group": "Engage",
+      "description": "Call queues and live sessions"
     },
     {
       "label": "Call log",
       "path": "/calls",
       "block": "dialer",
-      "component": "CallLog"
+      "component": "CallLogScreen",
+      "icon": "PhoneCall",
+      "group": "Engage",
+      "description": "Every call with transcript and outcome"
     },
     {
       "label": "Meetings",
       "path": "/meetings",
       "block": "appointments",
-      "component": "MeetingList"
+      "component": "MeetingsScreen",
+      "icon": "CalendarCheck",
+      "group": "Engage",
+      "description": "Booked, held and missed meetings"
+    },
+    {
+      "label": "Scheduling",
+      "path": "/scheduling",
+      "block": "appointments",
+      "component": "SchedulingScreen",
+      "icon": "CalendarClock",
+      "group": "Setup",
+      "description": "Booking links and event types"
     },
     {
       "label": "Deals",
       "path": "/deals",
       "block": "deals",
-      "component": "PipelineBoard"
+      "component": "DealsScreen",
+      "icon": "Handshake",
+      "group": "Pipeline",
+      "description": "Pipeline board, forecast and deal detail"
     },
     {
-      "label": "Analytics",
-      "path": "/analytics",
-      "block": "analytics",
-      "component": "KpiTiles"
+      "label": "Tasks",
+      "path": "/tasks",
+      "block": "crm",
+      "component": "TasksScreen",
+      "icon": "CheckSquare",
+      "group": "Work",
+      "description": "Follow-ups due across your records"
+    },
+    {
+      "label": "Mailboxes",
+      "path": "/mailboxes",
+      "block": "mailboxes",
+      "component": "MailboxesScreen",
+      "icon": "Mail",
+      "group": "Setup",
+      "description": "Sending mailboxes and warmup health"
+    },
+    {
+      "label": "Suppressions",
+      "path": "/suppressions",
+      "block": "lists",
+      "component": "SuppressionsScreen",
+      "icon": "ShieldOff",
+      "group": "Setup",
+      "description": "People and domains you never contact"
     },
     {
       "label": "Integrations",
       "path": "/integrations",
       "block": "integrations",
-      "component": "IntegrationList"
+      "component": "IntegrationsScreen",
+      "icon": "Plug",
+      "group": "Setup",
+      "description": "Connected tools and data sources"
     }
   ]
 }

package/stacks/calendly.json

@@ -0,0 +1,60 @@
+{
+  "$schema": "./stack.schema.json",
+  "id": "calendly",
+  "title": "Calendly-style scheduling",
+  "summary": "Booking links, meetings and the contacts behind them.",
+  "status": "available",
+  "blocks": [
+    "foundation",
+    "crm",
+    "appointments"
+  ],
+  "home": "/meetings",
+  "nav": [
+    {
+      "label": "Meetings",
+      "path": "/meetings",
+      "block": "appointments",
+      "component": "MeetingsScreen",
+      "icon": "CalendarCheck",
+      "group": "Engage",
+      "description": "Booked, held and missed meetings"
+    },
+    {
+      "label": "Scheduling",
+      "path": "/scheduling",
+      "block": "appointments",
+      "component": "SchedulingScreen",
+      "icon": "CalendarClock",
+      "group": "Setup",
+      "description": "Booking links and event types"
+    },
+    {
+      "label": "Contacts",
+      "path": "/contacts",
+      "block": "crm",
+      "component": "ContactsScreen",
+      "icon": "Users",
+      "group": "Prospect",
+      "description": "People you sell to, with notes, tasks and activity"
+    },
+    {
+      "label": "Companies",
+      "path": "/companies",
+      "block": "crm",
+      "component": "CompaniesScreen",
+      "icon": "Building2",
+      "group": "Prospect",
+      "description": "Accounts and the people at them"
+    },
+    {
+      "label": "Tasks",
+      "path": "/tasks",
+      "block": "crm",
+      "component": "TasksScreen",
+      "icon": "CheckSquare",
+      "group": "Work",
+      "description": "Follow-ups due across your records"
+    }
+  ]
+}

package/stacks/clay/pages/companies.tsx.tmpl

@@ -0,0 +1,15 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { CompaniesScreen } from "@/components/g8/crm/companies-screen";
+import { EnrichButton } from "@/components/g8/enrichment/enrich-button";
+
+export default function Page() {
+  return (
+    <CompaniesScreen
+      renderRowActions={(c, { reload }) => <EnrichButton kind="company" lookup={{ domain: c.domain ?? undefined, name: c.name ?? undefined }} record={{ ...c }} onApplied={reload} label="Enrich" size="sm" variant="ghost" />}
+      renderDetailActions={(c, { reload }) => <EnrichButton kind="company" lookup={{ domain: c.domain ?? undefined, name: c.name ?? undefined }} record={{ ...c }} onApplied={reload} recordLoaded label="Enrich" />}
+    />
+  );
+}

package/stacks/clay/pages/contacts.tsx.tmpl

@@ -0,0 +1,19 @@
+"use client";
+
+// Generated by `graph8-sdk create {{stackId}}`. The {{block}} block's {{component}} (source in {{blockDir}}), with the
+// other blocks of this app plugged into its slots. Edit freely: this file is yours.
+import { ContactsScreen } from "@/components/g8/crm/contacts-screen";
+import { EnrichButton } from "@/components/g8/enrichment/enrich-button";
+
+export default function Page() {
+  return (
+    <ContactsScreen
+      renderRowActions={(c, { reload }) => <EnrichButton kind="person" lookup={{ email: c.work_email ?? undefined, linkedin_url: c.linkedin_url ?? undefined, first_name: c.first_name ?? undefined, last_name: c.last_name ?? undefined }} record={{ ...c }} onApplied={reload} label="Enrich" size="sm" variant="ghost" />}
+      renderDetailActions={(c, { reload }) => (
+        <>
+          <EnrichButton kind="person" lookup={{ email: c.work_email ?? undefined, linkedin_url: c.linkedin_url ?? undefined, first_name: c.first_name ?? undefined, last_name: c.last_name ?? undefined }} record={{ ...c }} onApplied={reload} recordLoaded label="Enrich" />
+        </>
+      )}
+    />
+  );
+}