@graph8/sdk 0.370.0 → 0.373.0

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

@@ -2,46 +2,22 @@
 
 // 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 { 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>
-  );
-}
+import { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
+import { RecordDealsTab } from "@/components/g8/deals/record-deals-tab";
+import { RecordQuotesTab } from "@/components/g8/quotes/record-quotes-tab";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
+  const router = useRouter();
   return (
     <CompaniesScreen
-      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="companies" id={c.id} /> }]}
+      onOpenContact={(contact) => router.push(`/contacts?id=${contact.id}`)}
+      extraDetailTabs={[
+        { id: "quotes", label: "Quotes", render: (c) => <RecordQuotesTab kind="companies" id={c.id} onOpenQuote={(id) => router.push(`/quotes?id=${encodeURIComponent(id)}`)} /> },
+        { id: "deals", label: "Deals", render: (c) => <RecordDealsTab kind="companies" id={c.id} onOpenDeal={(id) => router.push(`/deals?id=${encodeURIComponent(id)}`)} /> },
+        { id: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="companies" id={c.id} /> },
+      ]}
     />
   );
 }

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

@@ -2,46 +2,26 @@
 
 // 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 { RecordMeetingsTab } from "@/components/g8/appointments/record-meetings-tab";
 import { ContactsScreen } from "@/components/g8/crm/contacts-screen";
-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>
-  );
-}
+import { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
+import { RecordDealsTab } from "@/components/g8/deals/record-deals-tab";
+import { RecordConversationsTab } from "@/components/g8/inbox/record-conversations-tab";
+import { RecordQuotesTab } from "@/components/g8/quotes/record-quotes-tab";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
+  const router = useRouter();
   return (
     <ContactsScreen
-      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="contacts" id={c.id} /> }]}
+      onOpenCompany={(id) => router.push(`/companies?id=${id}`)}
+      extraDetailTabs={[
+        { id: "meetings", label: "Meetings", render: (c) => <RecordMeetingsTab contactId={c.id} onOpenMeeting={(sel) => router.push(`/meetings?sel=${encodeURIComponent(sel)}`)} /> },
+        { id: "quotes", label: "Quotes", render: (c) => <RecordQuotesTab kind="contacts" id={c.id} onOpenQuote={(id) => router.push(`/quotes?id=${encodeURIComponent(id)}`)} /> },
+        { id: "deals", label: "Deals", render: (c) => <RecordDealsTab kind="contacts" id={c.id} onOpenDeal={(id) => router.push(`/deals?id=${encodeURIComponent(id)}`)} /> },
+        { id: "conversations", label: "Conversations", render: (c) => <RecordConversationsTab email={c.work_email} alsoEmails={[c.personal_emails]} onOpenThread={(sel) => router.push(`/inbox?id=${encodeURIComponent(sel)}`)} /> },
+        { id: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="contacts" id={c.id} /> },
+      ]}
     />
   );
 }

package/stacks/pipedrive/pages/deals.tsx.tmpl

@@ -4,8 +4,17 @@
 // other blocks of this app plugged into its slots. Edit freely: this file is yours.
 import { useRouter } from "next/navigation";
 import { DealsScreen } from "@/components/g8/deals/deals-screen";
+import { CreateQuoteFromDeal } from "@/components/g8/quotes/create-quote-from-deal";
 
+/** A deal opens its quotes, its contacts and (from a contact) their company. */
 export default function Page() {
   const router = useRouter();
-  return <DealsScreen onOpenQuote={(quoteId) => router.push(`/quotes?id=${encodeURIComponent(quoteId)}`)} />;
+  return (
+    <DealsScreen
+      onOpenQuote={(quoteId) => router.push(`/quotes?id=${encodeURIComponent(quoteId)}`)}
+      renderQuoteActions={(deal) => <CreateQuoteFromDeal dealId={deal.id} />}
+      onOpenContact={(id) => router.push(`/contacts?id=${id}`)}
+      onOpenCompany={(id) => router.push(`/companies?id=${id}`)}
+    />
+  );
 }

package/stacks/pipedrive/pages/inbox.tsx.tmpl

@@ -10,6 +10,7 @@ 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 { ContactLookupLink } from "@/components/g8/crm/contact-lookup-link";
 import { DealDetail } from "@/components/g8/deals/deal-detail";
 import { useDefaultOwner } from "@/components/g8/deals/hooks/use-default-owner";
 import { InboxScreen } from "@/components/g8/inbox/inbox-screen";
@@ -88,5 +89,15 @@ function CreateDeal({ thread }: { thread: InboxThread }) {
 }
 
 export default function Page() {
-  return <InboxScreen renderDetailActions={(thread) => <CreateDeal thread={thread} />} />;
+  const router = useRouter();
+  return (
+    <InboxScreen
+      renderDetailActions={(thread) => (
+        <>
+          <ContactLookupLink email={thread.contact?.email} onOpen={(id) => router.push(`/contacts?id=${id}`)} />
+          <CreateDeal thread={thread} />
+        </>
+      )}
+    />
+  );
 }

package/stacks/pipedrive/pages/meetings.tsx.tmpl

@@ -0,0 +1,13 @@
+"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 { useRouter } from "next/navigation";
+import { MeetingContactLinks } from "@/components/g8/appointments/meeting-contact-links";
+import { MeetingsScreen } from "@/components/g8/appointments/meetings-screen";
+
+/** A meeting opens the attendees who are contacts in your CRM. */
+export default function Page() {
+  const router = useRouter();
+  return <MeetingsScreen renderDetailActions={(selection) => <MeetingContactLinks selection={selection} onOpenContact={(id) => router.push(`/contacts?id=${id}`)} />} />;
+}

package/stacks/pipedrive/pages/tasks.tsx.tmpl

@@ -0,0 +1,20 @@
+"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 { useRouter } from "next/navigation";
+import { TasksScreen } from "@/components/g8/crm/tasks-screen";
+
+/** A task's linked record opens in the screen that owns it. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <TasksScreen
+      onOpenRecord={(record) => {
+        if (record.entity_type === "contact") router.push(`/contacts?id=${encodeURIComponent(record.entity_id)}`);
+        if (record.entity_type === "company") router.push(`/companies?id=${encodeURIComponent(record.entity_id)}`);
+    if (record.entity_type === "deal") router.push(`/deals?id=${encodeURIComponent(record.entity_id)}`);
+      }}
+    />
+  );
+}

package/stacks/pipedrive.json

@@ -82,7 +82,8 @@
       "component": "MeetingsScreen",
       "icon": "CalendarCheck",
       "group": "Engage",
-      "description": "Booked, held and missed meetings"
+      "description": "Booked, held and missed meetings",
+      "page": "pages/meetings.tsx.tmpl"
     },
     {
       "label": "Scheduling",
@@ -100,7 +101,8 @@
       "component": "TasksScreen",
       "icon": "CheckSquare",
       "group": "Work",
-      "description": "Follow-ups due across your records"
+      "description": "Follow-ups due across your records",
+      "page": "pages/tasks.tsx.tmpl"
     },
     {
       "label": "Mailboxes",

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

@@ -2,46 +2,25 @@
 
 // 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 { 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>
-  );
-}
+import { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
+import { RecordDealsTab } from "@/components/g8/deals/record-deals-tab";
+import { AddCompanyPeopleToListButton } from "@/components/g8/lists/add-company-people-to-list-button";
+import { RecordQuotesTab } from "@/components/g8/quotes/record-quotes-tab";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
+  const router = useRouter();
   return (
     <CompaniesScreen
-      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="companies" id={c.id} /> }]}
+      onOpenContact={(contact) => router.push(`/contacts?id=${contact.id}`)}
+      renderBulkActions={({ ids, clear }) => <AddCompanyPeopleToListButton companyIds={ids} onAdded={clear} />}
+      renderDetailActions={(c) => <AddCompanyPeopleToListButton companyIds={[c.id]} />}
+      extraDetailTabs={[
+        { id: "quotes", label: "Quotes", render: (c) => <RecordQuotesTab kind="companies" id={c.id} onOpenQuote={(id) => router.push(`/quotes?id=${encodeURIComponent(id)}`)} /> },
+        { id: "deals", label: "Deals", render: (c) => <RecordDealsTab kind="companies" id={c.id} onOpenDeal={(id) => router.push(`/deals?id=${encodeURIComponent(id)}`)} /> },
+        { id: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="companies" id={c.id} /> },
+      ]}
     />
   );
 }

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

@@ -2,46 +2,31 @@
 
 // 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 { ContactsScreen } from "@/components/g8/crm/contacts-screen";
-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>
-  );
-}
+import { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
+import { RecordDealsTab } from "@/components/g8/deals/record-deals-tab";
+import { AddToListButton } from "@/components/g8/lists/add-to-list-button";
+import { RecordListsTab } from "@/components/g8/lists/record-lists-tab";
+import { RecordQuotesTab } from "@/components/g8/quotes/record-quotes-tab";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
+  const router = useRouter();
   return (
     <ContactsScreen
-      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="contacts" id={c.id} /> }]}
+      onOpenCompany={(id) => router.push(`/companies?id=${id}`)}
+      renderBulkActions={({ ids, clear }) => <AddToListButton contactIds={ids} onAdded={clear} />}
+      renderDetailActions={(c) => (
+        <>
+          <AddToListButton contactIds={[c.id]} />
+        </>
+      )}
+      extraDetailTabs={[
+        { id: "lists", label: "Lists", render: (c) => <RecordListsTab contactId={c.id} onOpenList={(id) => router.push(`/lists?id=${id}`)} /> },
+        { id: "quotes", label: "Quotes", render: (c) => <RecordQuotesTab kind="contacts" id={c.id} onOpenQuote={(id) => router.push(`/quotes?id=${encodeURIComponent(id)}`)} /> },
+        { id: "deals", label: "Deals", render: (c) => <RecordDealsTab kind="contacts" id={c.id} onOpenDeal={(id) => router.push(`/deals?id=${encodeURIComponent(id)}`)} /> },
+        { id: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="contacts" id={c.id} /> },
+      ]}
     />
   );
 }

package/stacks/salesforce/pages/deals.tsx.tmpl

@@ -4,8 +4,17 @@
 // other blocks of this app plugged into its slots. Edit freely: this file is yours.
 import { useRouter } from "next/navigation";
 import { DealsScreen } from "@/components/g8/deals/deals-screen";
+import { CreateQuoteFromDeal } from "@/components/g8/quotes/create-quote-from-deal";
 
+/** A deal opens its quotes, its contacts and (from a contact) their company. */
 export default function Page() {
   const router = useRouter();
-  return <DealsScreen onOpenQuote={(quoteId) => router.push(`/quotes?id=${encodeURIComponent(quoteId)}`)} />;
+  return (
+    <DealsScreen
+      onOpenQuote={(quoteId) => router.push(`/quotes?id=${encodeURIComponent(quoteId)}`)}
+      renderQuoteActions={(deal) => <CreateQuoteFromDeal dealId={deal.id} />}
+      onOpenContact={(id) => router.push(`/contacts?id=${id}`)}
+      onOpenCompany={(id) => router.push(`/companies?id=${id}`)}
+    />
+  );
 }

package/stacks/salesforce/pages/lifecycle.tsx.tmpl

@@ -0,0 +1,23 @@
+"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 { useRouter } from "next/navigation";
+import { Button } from "@graph8/sdk/ui";
+import { Building2, UserRound } from "lucide-react";
+import { LifecycleScreen } from "@/components/g8/lifecycle/lifecycle-screen";
+
+/** A lifecycle record opens its company or contact record. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <LifecycleScreen
+      renderDetailActions={(record) => (
+        <Button size="sm" variant="outline" onClick={() => router.push(`/${record.kind === "company" ? "companies" : "contacts"}?id=${record.id}`)}>
+          {record.kind === "company" ? <Building2 className="mr-1 size-4" aria-hidden /> : <UserRound className="mr-1 size-4" aria-hidden />}
+          {record.kind === "company" ? "Open company" : "Open contact"}
+        </Button>
+      )}
+    />
+  );
+}

package/stacks/salesforce/pages/lists.tsx.tmpl

@@ -0,0 +1,12 @@
+"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 { useRouter } from "next/navigation";
+import { ListsScreen } from "@/components/g8/lists/lists-screen";
+
+/** A list member opens in Contacts. */
+export default function Page() {
+  const router = useRouter();
+  return <ListsScreen onOpenContact={(id) => router.push(`/contacts?id=${id}`)} />;
+}

package/stacks/salesforce/pages/tasks.tsx.tmpl

@@ -0,0 +1,20 @@
+"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 { useRouter } from "next/navigation";
+import { TasksScreen } from "@/components/g8/crm/tasks-screen";
+
+/** A task's linked record opens in the screen that owns it. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <TasksScreen
+      onOpenRecord={(record) => {
+        if (record.entity_type === "contact") router.push(`/contacts?id=${encodeURIComponent(record.entity_id)}`);
+        if (record.entity_type === "company") router.push(`/companies?id=${encodeURIComponent(record.entity_id)}`);
+    if (record.entity_type === "deal") router.push(`/deals?id=${encodeURIComponent(record.entity_id)}`);
+      }}
+    />
+  );
+}

package/stacks/salesforce.json

@@ -6,6 +6,7 @@
   "status": "available",
   "blocks": [
     "foundation",
+    "pickers",
     "crm",
     "objects",
     "lists",
@@ -55,7 +56,8 @@
       "component": "ListsScreen",
       "icon": "ListChecks",
       "group": "Prospect",
-      "description": "Saved audiences you can sequence or sync"
+      "description": "Saved audiences you can sequence or sync",
+      "page": "pages/lists.tsx.tmpl"
     },
     {
       "label": "Deals",
@@ -84,7 +86,8 @@
       "component": "LifecycleScreen",
       "icon": "GitBranch",
       "group": "Pipeline",
-      "description": "Move records through lifecycle stages"
+      "description": "Move records through lifecycle stages",
+      "page": "pages/lifecycle.tsx.tmpl"
     },
     {
       "label": "Tasks",
@@ -93,7 +96,8 @@
       "component": "TasksScreen",
       "icon": "CheckSquare",
       "group": "Work",
-      "description": "Follow-ups due across your records"
+      "description": "Follow-ups due across your records",
+      "page": "pages/tasks.tsx.tmpl"
     },
     {
       "label": "Workflows",

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

@@ -3,13 +3,29 @@
 // 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 { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
 import { EnrichButton } from "@/components/g8/enrichment/enrich-button";
+import { AddCompanyPeopleToListButton } from "@/components/g8/lists/add-company-people-to-list-button";
+import { CompanyIntelligenceTab } from "@/components/g8/company-intelligence/company-intelligence-tab";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
+  const router = useRouter();
   return (
     <CompaniesScreen
+      onOpenContact={(contact) => router.push(`/contacts?id=${contact.id}`)}
       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" />}
+      renderBulkActions={({ ids, clear }) => <AddCompanyPeopleToListButton companyIds={ids} onAdded={clear} />}
+      renderDetailActions={(c, { reload }) => (
+        <>
+          <EnrichButton kind="company" lookup={{ domain: c.domain ?? undefined, name: c.name ?? undefined }} record={{ ...c }} onApplied={reload} label="Enrich" />
+          <AddCompanyPeopleToListButton companyIds={[c.id]} />
+        </>
+      )}
+      extraDetailTabs={[
+        { id: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="companies" id={c.id} /> },
+        { id: "intelligence", label: "Intelligence", render: (c) => <CompanyIntelligenceTab company={c} onOpenIntelligence={() => router.push("/company-intelligence")} /> },
+      ]}
     />
   );
 }

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

@@ -3,17 +3,29 @@
 // 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 { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
 import { EnrichButton } from "@/components/g8/enrichment/enrich-button";
+import { AddToListButton } from "@/components/g8/lists/add-to-list-button";
+import { RecordListsTab } from "@/components/g8/lists/record-lists-tab";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
+  const router = useRouter();
   return (
     <ContactsScreen
+      onOpenCompany={(id) => router.push(`/companies?id=${id}`)}
       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 }) => <AddToListButton contactIds={ids} onAdded={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" />
+          <AddToListButton contactIds={[c.id]} />
         </>
       )}
+      extraDetailTabs={[
+        { id: "lists", label: "Lists", render: (c) => <RecordListsTab contactId={c.id} onOpenList={(id) => router.push(`/lists?id=${id}`)} /> },
+        { id: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="contacts" id={c.id} /> },
+      ]}
     />
   );
 }

package/stacks/zoominfo/pages/lists.tsx.tmpl

@@ -0,0 +1,12 @@
+"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 { useRouter } from "next/navigation";
+import { ListsScreen } from "@/components/g8/lists/lists-screen";
+
+/** A list member opens in Contacts. */
+export default function Page() {
+  const router = useRouter();
+  return <ListsScreen onOpenContact={(id) => router.push(`/contacts?id=${id}`)} />;
+}

package/stacks/zoominfo/pages/tasks.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 { useRouter } from "next/navigation";
+import { TasksScreen } from "@/components/g8/crm/tasks-screen";
+
+/** A task's linked record opens in the screen that owns it. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <TasksScreen
+      onOpenRecord={(record) => {
+        if (record.entity_type === "contact") router.push(`/contacts?id=${encodeURIComponent(record.entity_id)}`);
+        if (record.entity_type === "company") router.push(`/companies?id=${encodeURIComponent(record.entity_id)}`);
+      }}
+    />
+  );
+}

package/stacks/zoominfo.json

@@ -6,12 +6,14 @@
   "status": "available",
   "blocks": [
     "foundation",
+    "pickers",
     "crm",
     "lists",
     "search",
     "enrichment",
     "intent",
-    "visitors"
+    "visitors",
+    "company-intelligence"
   ],
   "home": "/prospect-search",
   "nav": [
@@ -44,6 +46,15 @@
       "description": "Accounts and the people at them",
       "page": "pages/companies.tsx.tmpl"
     },
+    {
+      "label": "Company intelligence",
+      "path": "/company-intelligence",
+      "block": "company-intelligence",
+      "component": "CompanyIntelligenceScreen",
+      "icon": "Telescope",
+      "group": "Setup",
+      "description": "Research your website: profile, competitors, news, documents and reports"
+    },
     {
       "label": "Tasks",
       "path": "/tasks",
@@ -51,7 +62,8 @@
       "component": "TasksScreen",
       "icon": "CheckSquare",
       "group": "Work",
-      "description": "Follow-ups due across your records"
+      "description": "Follow-ups due across your records",
+      "page": "pages/tasks.tsx.tmpl"
     },
     {
       "label": "Lists",
@@ -60,7 +72,8 @@
       "component": "ListsScreen",
       "icon": "ListChecks",
       "group": "Prospect",
-      "description": "Saved audiences you can sequence or sync"
+      "description": "Saved audiences you can sequence or sync",
+      "page": "pages/lists.tsx.tmpl"
     },
     {
       "label": "Enrichment",