@graph8/sdk 0.370.0 → 0.374.0

package/stacks/intercom.json

@@ -9,6 +9,7 @@
     "crm",
     "webchat",
     "mailboxes",
+    "email-signatures",
     "inbox",
     "agents"
   ],
@@ -21,7 +22,8 @@
       "component": "InboxScreen",
       "icon": "Inbox",
       "group": "Engage",
-      "description": "Replies from every channel in one place"
+      "description": "Replies from every channel in one place",
+      "page": "pages/inbox-contact.tsx.tmpl"
     },
     {
       "label": "Conversations",
@@ -39,7 +41,8 @@
       "component": "ContactsScreen",
       "icon": "Users",
       "group": "Prospect",
-      "description": "People you sell to, with notes, tasks and activity"
+      "description": "People you sell to, with notes, tasks and activity",
+      "page": "pages/contacts.tsx.tmpl"
     },
     {
       "label": "Companies",
@@ -48,7 +51,8 @@
       "component": "CompaniesScreen",
       "icon": "Building2",
       "group": "Prospect",
-      "description": "Accounts and the people at them"
+      "description": "Accounts and the people at them",
+      "page": "pages/companies.tsx.tmpl"
     },
     {
       "label": "Tasks",
@@ -57,7 +61,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": "Agents",
@@ -76,6 +81,15 @@
       "icon": "Mail",
       "group": "Setup",
       "description": "Sending mailboxes and warmup health"
+    },
+    {
+      "label": "Email signatures",
+      "path": "/email-signatures",
+      "block": "email-signatures",
+      "component": "EmailSignaturesScreen",
+      "icon": "PenLine",
+      "group": "Setup",
+      "description": "One signature for the team, kept on every mailbox"
     }
   ]
 }

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

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

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

@@ -0,0 +1,30 @@
+"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 { MemberPicker } from "@/components/g8/pickers/member-picker";
+import { ContactsScreen } from "@/components/g8/crm/contacts-screen";
+import { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
+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
+      renderOwnerPicker={(picker) => <MemberPicker label="New owner" {...picker} />}
+      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: "engagement", label: "Engagement", render: (c) => <RecordEngagementTab kind="contacts" id={c.id} /> },
+      ]}
+    />
+  );
+}

package/stacks/mailchimp/pages/forms.tsx.tmpl

@@ -0,0 +1,36 @@
+"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 { ContactLookupLink, splitName } from "@/components/g8/crm/contact-lookup-link";
+import { FormsScreen } from "@/components/g8/forms/forms-screen";
+
+/** The first email-looking value a person typed into the form. Identifying fields are redacted for some keys: then there is no email and no button. */
+function emailOf(data: Record<string, unknown> | undefined): string | null {
+  for (const [key, value] of Object.entries(data ?? {})) {
+    if (/e-?mail/i.test(key) && typeof value === "string" && value.includes("@") && !value.includes("*")) return value.trim();
+  }
+  return null;
+}
+
+/** The submitter's name when the form asked for one. */
+function nameOf(data: Record<string, unknown> | undefined): { firstName?: string; lastName?: string } {
+  const get = (re: RegExp) => Object.entries(data ?? {}).find(([k, v]) => re.test(k) && typeof v === "string" && v.trim())?.[1] as string | undefined;
+  const first = get(/^first[ _-]?name$/i);
+  const last = get(/^last[ _-]?name$/i);
+  if (first || last) return { firstName: first?.trim(), lastName: last?.trim() };
+  return splitName(get(/^(full[ _-]?)?name$/i));
+}
+
+/** A submission opens the contact it created, or adds the person when no contact has that email. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <FormsScreen
+      renderSubmissionActions={(submission) => (
+        <ContactLookupLink email={emailOf(submission.form_data)} createIfMissing={nameOf(submission.form_data)} onOpen={(id) => router.push(`/contacts?id=${id}`)} />
+      )}
+    />
+  );
+}

package/stacks/mailchimp/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/mailchimp/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/mailchimp.json

@@ -6,11 +6,13 @@
   "status": "available",
   "blocks": [
     "foundation",
+    "pickers",
     "crm",
     "forms",
     "lists",
     "newsletter",
-    "nurture"
+    "nurture",
+    "surveys"
   ],
   "home": "/newsletter",
   "nav": [
@@ -32,6 +34,15 @@
       "group": "Marketing",
       "description": "Automated nurture tracks"
     },
+    {
+      "label": "Surveys",
+      "path": "/surveys",
+      "block": "surveys",
+      "component": "SurveysScreen",
+      "icon": "ClipboardCheck",
+      "group": "Marketing",
+      "description": "NPS and CSAT: ask, score and read the answers"
+    },
     {
       "label": "Forms",
       "path": "/forms",
@@ -39,7 +50,8 @@
       "component": "FormsScreen",
       "icon": "ClipboardList",
       "group": "Marketing",
-      "description": "Forms and their submissions"
+      "description": "Forms and their submissions",
+      "page": "pages/forms.tsx.tmpl"
     },
     {
       "label": "Contacts",
@@ -48,7 +60,8 @@
       "component": "ContactsScreen",
       "icon": "Users",
       "group": "Prospect",
-      "description": "People you sell to, with notes, tasks and activity"
+      "description": "People you sell to, with notes, tasks and activity",
+      "page": "pages/contacts.tsx.tmpl"
     },
     {
       "label": "Companies",
@@ -57,7 +70,8 @@
       "component": "CompaniesScreen",
       "icon": "Building2",
       "group": "Prospect",
-      "description": "Accounts and the people at them"
+      "description": "Accounts and the people at them",
+      "page": "pages/companies.tsx.tmpl"
     },
     {
       "label": "Tasks",
@@ -66,7 +80,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",
@@ -75,7 +90,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": "Suppressions",

package/stacks/outreach/pages/calls.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 { RecordOpenLinks } from "@/components/g8/crm/record-open-links";
+import { CallLogScreen } from "@/components/g8/dialer/call-log-screen";
+
+/** A call opens the person it was made to, and their company. The ids are checked against your CRM first, so a call whose contact is gone shows no link. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <CallLogScreen
+      renderDetailActions={(call) => (
+        <RecordOpenLinks
+          contactId={call.contact_id}
+          onOpenContact={(id) => router.push(`/contacts?id=${id}`)}
+          onOpenCompany={(id) => router.push(`/companies?id=${id}`)}
+        />
+      )}
+    />
+  );
+}

package/stacks/outreach/pages/campaigns.tsx.tmpl

@@ -0,0 +1,27 @@
+"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 { CampaignLinksTab } from "@/components/g8/campaigns/campaign-links";
+import { CampaignsScreen } from "@/components/g8/campaigns/campaigns-screen";
+
+/** A campaign lists its landing pages, workflows and newsletters. This app has no screens for them, so the rows show names only. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <CampaignsScreen
+      extraDetailTabs={[
+        {
+          id: "links",
+          label: "Links",
+          render: (c) => (
+            <CampaignLinksTab
+              campaignId={c.id}
+            />
+          ),
+        },
+      ]}
+    />
+  );
+}

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

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

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

@@ -2,84 +2,47 @@
 
 // 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 { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, Skeleton } from "@graph8/sdk/ui";
-import { 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 { RecordMeetingsTab } from "@/components/g8/appointments/record-meetings-tab";
+import { MemberPicker } from "@/components/g8/pickers/member-picker";
 import { ContactsScreen } from "@/components/g8/crm/contacts-screen";
+import { RecordEngagementTab } from "@/components/g8/crm/record-engagement-tab";
 import { CallContactButton } from "@/components/g8/dialer/call-contact-button";
-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}
-    </>
-  );
-}
+import { RecordCallsTab } from "@/components/g8/dialer/record-calls-tab";
+import { RecordConversationsTab } from "@/components/g8/inbox/record-conversations-tab";
+import { AddToListButton } from "@/components/g8/lists/add-to-list-button";
+import { RecordListsTab } from "@/components/g8/lists/record-lists-tab";
+import { AddToSequenceButton } from "@/components/g8/sequencer/add-to-sequence-button";
+import { RecordSequencesTab } from "@/components/g8/sequencer/record-sequences-tab";
+import { useRouter } from "next/navigation";
 
 export default function Page() {
+  const router = useRouter();
   return (
     <ContactsScreen
-      renderBulkActions={({ ids, clear }) => <AddToSequence contactIds={ids} onEnrolled={clear} />}
+      renderOwnerPicker={(picker) => <MemberPicker label="New owner" {...picker} />}
+      onOpenCompany={(id) => router.push(`/companies?id=${id}`)}
+      renderBulkActions={({ ids, clear }) => (
+        <>
+          <AddToSequenceButton contactIds={ids} onEnrolled={clear} />
+          <AddToListButton contactIds={ids} onAdded={clear} />
+        </>
+      )}
       renderDetailActions={(c) => (
         <>
-          <AddToSequence contactIds={[c.id]} />
+          <AddToSequenceButton contactIds={[c.id]} />
+          <AddToListButton 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: "lists", label: "Lists", render: (c) => <RecordListsTab contactId={c.id} onOpenList={(id) => router.push(`/lists?id=${id}`)} /> },
+        { id: "sequences", label: "Sequences", render: (c) => <RecordSequencesTab contactId={c.id} onOpenSequence={(id) => router.push(`/sequences?id=${encodeURIComponent(id)}`)} /> },
+        { id: "meetings", label: "Meetings", render: (c) => <RecordMeetingsTab contactId={c.id} onOpenMeeting={(sel) => router.push(`/meetings?sel=${encodeURIComponent(sel)}`)} /> },
+        { id: "calls", label: "Calls", render: (c) => <RecordCallsTab 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 }} onOpenCall={(room) => router.push(`/calls?id=${encodeURIComponent(room)}`)} /> },
+        { 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/outreach/pages/inbox-contact.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 { ContactLookupLink, splitName } from "@/components/g8/crm/contact-lookup-link";
+import { InboxScreen } from "@/components/g8/inbox/inbox-screen";
+
+/** A conversation opens the sender when they are a contact in your CRM, or adds them when they are new. */
+export default function Page() {
+  const router = useRouter();
+  return <InboxScreen renderDetailActions={(thread) => <ContactLookupLink email={thread.contact?.email} createIfMissing={splitName(thread.contact?.name)} onOpen={(id) => router.push(`/contacts?id=${id}`)} />} />;
+}

package/stacks/outreach/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/outreach/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/outreach/pages/sequences.tsx.tmpl

@@ -0,0 +1,18 @@
+"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 { SequenceCampaignLink } from "@/components/g8/sequencer/sequence-campaign-link";
+import { SequencesScreen } from "@/components/g8/sequencer/sequences-screen";
+
+/** An enrolled person opens in Contacts; a sequence opens, links or unlinks its campaign. */
+export default function Page() {
+  const router = useRouter();
+  return (
+    <SequencesScreen
+      onOpenContact={(id) => router.push(`/contacts?id=${id}`)}
+      renderDetailActions={(sequence) => <SequenceCampaignLink sequence={sequence} onOpenCampaign={(id) => router.push(`/campaigns?id=${encodeURIComponent(id)}`)} />}
+    />
+  );
+}

package/stacks/outreach/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)}`);
+      }}
+    />
+  );
+}