@graph8/sdk 0.361.0 → 0.370.0

package/stacks/outreach.json

@@ -2,7 +2,7 @@
   "$schema": "./stack.schema.json",
   "id": "outreach",
   "title": "Outreach-style sales engagement",
-  "summary": "Multichannel sales engagement: mailboxes, sequences, inbox, dialer, meetings and analytics.",
+  "summary": "Sequences, campaigns, shared mailboxes, inbox, dialer and meetings with analytics on top.",
   "status": "available",
   "blocks": [
     "foundation",
@@ -10,77 +10,140 @@
     "lists",
     "mailboxes",
     "sequencer",
+    "campaigns",
     "inbox",
     "dialer",
     "appointments",
     "analytics"
   ],
+  "home": "/analytics",
   "nav": [
+    {
+      "label": "Analytics",
+      "path": "/analytics",
+      "block": "analytics",
+      "component": "AnalyticsScreen",
+      "icon": "BarChart3",
+      "group": "Insights",
+      "description": "Pipeline, engagement and team KPIs"
+    },
     {
       "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"
     },
     {
       "label": "Lists",
       "path": "/lists",
       "block": "lists",
-      "component": "ListTable"
-    },
-    {
-      "label": "Suppressions",
-      "path": "/suppressions",
-      "block": "lists",
-      "component": "SuppressionManager"
-    },
-    {
-      "label": "Mailboxes",
-      "path": "/mailboxes",
-      "block": "mailboxes",
-      "component": "MailboxList"
+      "component": "ListsScreen",
+      "icon": "ListChecks",
+      "group": "Prospect",
+      "description": "Saved audiences you can sequence or sync"
     },
     {
       "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": "Analytics",
-      "path": "/analytics",
-      "block": "analytics",
-      "component": "KpiTiles"
+      "label": "Scheduling",
+      "path": "/scheduling",
+      "block": "appointments",
+      "component": "SchedulingScreen",
+      "icon": "CalendarClock",
+      "group": "Setup",
+      "description": "Booking links and event types"
+    },
+    {
+      "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"
     }
   ]
 }

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

@@ -0,0 +1,47 @@
+"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 { 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
+      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="companies" id={c.id} /> }]}
+    />
+  );
+}

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

@@ -0,0 +1,47 @@
+"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 { 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>
+  );
+}
+
+export default function Page() {
+  return (
+    <ContactsScreen
+      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="contacts" id={c.id} /> }]}
+    />
+  );
+}

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

@@ -0,0 +1,11 @@
+"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 { DealsScreen } from "@/components/g8/deals/deals-screen";
+
+export default function Page() {
+  const router = useRouter();
+  return <DealsScreen onOpenQuote={(quoteId) => router.push(`/quotes?id=${encodeURIComponent(quoteId)}`)} />;
+}

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

@@ -0,0 +1,92 @@
+"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 { useRouter } from "next/navigation";
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, 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 { 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";
+import type { InboxThread } from "@/components/g8/inbox/lib/inbox-types";
+
+interface Match { id: number; full_name?: string | null; first_name?: string | null; last_name?: string | null; work_email?: string | null; job_title?: string | null }
+const nameOf = (m: Match): string => m.full_name || [m.first_name, m.last_name].filter(Boolean).join(" ") || m.work_email || `Contact ${m.id}`;
+
+/** The new deal's form. Mounted only while the sheet is open, so browsing threads never loads the team. When the key has no person, the owner is chosen here instead of silently being the first member. */
+function NewDeal({ contactId, onSaved }: { contactId: number; onSaved: (dealId: string) => void }) {
+  const owner = useDefaultOwner();
+  const [ownerId, setOwnerId] = useState<string | null>(null);
+  if (owner.loading) return <Skeleton className="h-24 w-full" aria-label="Loading owners" />;
+  const effective = ownerId ?? owner.defaultOwner?.id ?? "";
+  if (!effective) return <ApiError error={owner.error ?? new Error("No team member found to own this deal.")} title="A deal needs an owner" onRetry={() => void owner.reload()} />;
+  return (
+    <div className="space-y-3">
+      {owner.source === "first-member" ? (
+        <div className="space-y-1">
+          <label htmlFor="inbox-deal-owner" className="text-sm font-medium">Owner</label>
+          <select id="inbox-deal-owner" className="h-9 w-full rounded-md border bg-background px-2 text-sm" value={effective} onChange={(e) => setOwnerId(e.target.value)}>
+            {owner.owners.map((o) => <option key={o.id} value={o.id}>{o.name}{o.email && o.email !== o.name ? ` (${o.email})` : ""}</option>)}
+          </select>
+          <p className="text-xs text-muted-foreground">This key has no person of its own, so choose who owns the deal.</p>
+        </div>
+      ) : null}
+      <DealDetail ownerId={effective} contactIds={[contactId]} onSaved={(deal) => onSaved(deal.id)} />
+    </div>
+  );
+}
+
+/** Create a deal from a reply: find the sender in your CRM, pick them, then fill in the deal. */
+function CreateDeal({ thread }: { thread: InboxThread }) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [contactId, setContactId] = useState<number | null>(null);
+  const name = thread.contact?.name?.trim() ?? "";
+  const matches = useG8Query(async (signal) => ((await g8Get<Match[]>("/contacts", { name, limit: 8, page: 1 }, { signal })).data ?? []), [name], { enabled: open && name.length > 1 });
+  const email = thread.contact?.email?.toLowerCase();
+  const list = matches.data ?? [];
+  return (
+    <>
+      <Button size="sm" variant="outline" onClick={() => { setContactId(null); setOpen(true); }}>
+        <Handshake className="mr-1 size-4" aria-hidden />
+        Create deal
+      </Button>
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetContent className="w-full overflow-y-auto sm:max-w-xl">
+          <SheetHeader>
+            <SheetTitle>Create deal</SheetTitle>
+            <SheetDescription>A deal needs a contact in your CRM. Pick the person who wrote this reply.</SheetDescription>
+          </SheetHeader>
+          <div className="space-y-4 p-4">
+            {name.length < 2 ? <EmptyState compact title="No sender name on this thread" description="Open the contact in Contacts and create the deal from the Deals page." /> : null}
+            {matches.error ? <ApiError error={matches.error} title="Could not search contacts" onRetry={() => void matches.refetch()} /> : null}
+            {matches.loading && !matches.data ? <Skeleton className="h-16 w-full" aria-label="Searching contacts" /> : null}
+            {matches.data && list.length === 0 ? <EmptyState compact title="Not in your CRM yet" description={`Add ${name} in Contacts first, then come back.`} /> : null}
+            {list.length > 0 ? (
+              <ul className="divide-y rounded-md border" aria-label="Matching contacts">
+                {list.map((m) => (
+                  <li key={m.id}>
+                    <button type="button" aria-pressed={contactId === m.id} className="flex w-full items-center justify-between gap-3 p-3 text-left text-sm hover:bg-muted aria-pressed:bg-muted" onClick={() => setContactId(m.id)}>
+                      <span className="min-w-0 truncate font-medium">{nameOf(m)}</span>
+                      <span className="shrink-0 text-xs text-muted-foreground">{[m.job_title, m.work_email && m.work_email.toLowerCase() === email ? "Same email" : m.work_email].filter(Boolean).join(" · ")}</span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+            {contactId != null ? <NewDeal key={contactId} contactId={contactId} onSaved={(id) => router.push(`/deals?id=${encodeURIComponent(id)}`)} /> : null}
+          </div>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}
+
+export default function Page() {
+  return <InboxScreen renderDetailActions={(thread) => <CreateDeal thread={thread} />} />;
+}

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

@@ -0,0 +1,11 @@
+"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 { QuotesScreen } from "@/components/g8/quotes/quotes-screen";
+
+export default function Page() {
+  const router = useRouter();
+  return <QuotesScreen onOpenDeal={(dealId) => router.push(`/deals?id=${encodeURIComponent(dealId)}`)} />;
+}

package/stacks/pipedrive.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "./stack.schema.json",
+  "id": "pipedrive",
+  "title": "Pipedrive-style sales pipeline",
+  "summary": "Deals and quotes with mailboxes, inbox, meetings and analytics over your contacts.",
+  "status": "available",
+  "blocks": [
+    "foundation",
+    "crm",
+    "mailboxes",
+    "inbox",
+    "appointments",
+    "deals",
+    "quotes",
+    "analytics"
+  ],
+  "home": "/analytics",
+  "nav": [
+    {
+      "label": "Analytics",
+      "path": "/analytics",
+      "block": "analytics",
+      "component": "AnalyticsScreen",
+      "icon": "BarChart3",
+      "group": "Insights",
+      "description": "Pipeline, engagement and team KPIs"
+    },
+    {
+      "label": "Deals",
+      "path": "/deals",
+      "block": "deals",
+      "component": "DealsScreen",
+      "icon": "Handshake",
+      "group": "Pipeline",
+      "description": "Pipeline board, forecast and deal detail",
+      "page": "pages/deals.tsx.tmpl"
+    },
+    {
+      "label": "Quotes",
+      "path": "/quotes",
+      "block": "quotes",
+      "component": "QuotesScreen",
+      "icon": "FileText",
+      "group": "Pipeline",
+      "description": "Build, send and track quotes",
+      "page": "pages/quotes.tsx.tmpl"
+    },
+    {
+      "label": "Contacts",
+      "path": "/contacts",
+      "block": "crm",
+      "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": "CompaniesScreen",
+      "icon": "Building2",
+      "group": "Prospect",
+      "description": "Accounts and the people at them",
+      "page": "pages/companies.tsx.tmpl"
+    },
+    {
+      "label": "Inbox",
+      "path": "/inbox",
+      "block": "inbox",
+      "component": "InboxScreen",
+      "icon": "Inbox",
+      "group": "Engage",
+      "description": "Replies from every channel in one place",
+      "page": "pages/inbox.tsx.tmpl"
+    },
+    {
+      "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": "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"
+    }
+  ]
+}

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

@@ -0,0 +1,47 @@
+"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 { 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
+      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="companies" id={c.id} /> }]}
+    />
+  );
+}

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

@@ -0,0 +1,47 @@
+"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 { 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>
+  );
+}
+
+export default function Page() {
+  return (
+    <ContactsScreen
+      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="contacts" id={c.id} /> }]}
+    />
+  );
+}

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

@@ -0,0 +1,11 @@
+"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 { DealsScreen } from "@/components/g8/deals/deals-screen";
+
+export default function Page() {
+  const router = useRouter();
+  return <DealsScreen onOpenQuote={(quoteId) => router.push(`/quotes?id=${encodeURIComponent(quoteId)}`)} />;
+}

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

@@ -0,0 +1,11 @@
+"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 { QuotesScreen } from "@/components/g8/quotes/quotes-screen";
+
+export default function Page() {
+  const router = useRouter();
+  return <QuotesScreen onOpenDeal={(dealId) => router.push(`/deals?id=${encodeURIComponent(dealId)}`)} />;
+}