@graph8/sdk 0.361.0 → 0.370.0

package/stacks/clay.json

@@ -2,7 +2,7 @@
   "$schema": "./stack.schema.json",
   "id": "clay",
   "title": "Clay-style data workbench",
-  "summary": "Prospect search, waterfall enrichment and a spreadsheet-style workbench feeding lists.",
+  "summary": "Search, enrich and shape prospect data in a workbench, then keep it in lists and CRM records.",
   "status": "available",
   "blocks": [
     "foundation",
@@ -12,48 +12,81 @@
     "enrichment",
     "workbench"
   ],
+  "home": "/workbench",
   "nav": [
     {
-      "label": "Contacts",
-      "path": "/contacts",
-      "block": "crm",
-      "component": "ContactTable"
+      "label": "Prospect search",
+      "path": "/prospect-search",
+      "block": "search",
+      "component": "ProspectSearchScreen",
+      "icon": "Search",
+      "group": "Prospect",
+      "description": "Find new people and companies, then save them"
     },
     {
-      "label": "Companies",
-      "path": "/companies",
-      "block": "crm",
-      "component": "CompanyTable"
+      "label": "Workbench",
+      "path": "/workbench",
+      "block": "workbench",
+      "component": "WorkbenchScreen",
+      "icon": "Table2",
+      "group": "Prospect",
+      "description": "Build enrichment tables column by column"
+    },
+    {
+      "label": "Enrichment",
+      "path": "/enrichment",
+      "block": "enrichment",
+      "component": "EnrichmentScreen",
+      "icon": "Sparkles",
+      "group": "Prospect",
+      "description": "Fill in emails, phones and firmographics"
     },
     {
       "label": "Lists",
       "path": "/lists",
       "block": "lists",
-      "component": "ListTable"
+      "component": "ListsScreen",
+      "icon": "ListChecks",
+      "group": "Prospect",
+      "description": "Saved audiences you can sequence or sync"
     },
     {
-      "label": "Suppressions",
-      "path": "/suppressions",
-      "block": "lists",
-      "component": "SuppressionManager"
+      "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": "Prospect search",
-      "path": "/prospect-search",
-      "block": "search",
-      "component": "ProspectResults"
+      "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": "Enrichment",
-      "path": "/enrichment",
-      "block": "enrichment",
-      "component": "BulkEnrichPanel"
+      "label": "Tasks",
+      "path": "/tasks",
+      "block": "crm",
+      "component": "TasksScreen",
+      "icon": "CheckSquare",
+      "group": "Work",
+      "description": "Follow-ups due across your records"
     },
     {
-      "label": "Workbench",
-      "path": "/workbench",
-      "block": "workbench",
-      "component": "WorkbenchTableList"
+      "label": "Suppressions",
+      "path": "/suppressions",
+      "block": "lists",
+      "component": "SuppressionsScreen",
+      "icon": "ShieldOff",
+      "group": "Setup",
+      "description": "People and domains you never contact"
     }
   ]
 }

package/stacks/gong.json

@@ -2,7 +2,7 @@
   "$schema": "./stack.schema.json",
   "id": "gong",
   "title": "Gong-style call intelligence",
-  "summary": "Calling with dispositions and transcripts, meetings, call coaching scorecards and analytics.",
+  "summary": "Dialer, call log, meetings, coaching and analytics over your CRM records.",
   "status": "available",
   "blocks": [
     "foundation",
@@ -13,60 +13,106 @@
     "coach",
     "analytics"
   ],
+  "home": "/analytics",
   "nav": [
     {
-      "label": "Contacts",
-      "path": "/contacts",
-      "block": "crm",
-      "component": "ContactTable"
-    },
-    {
-      "label": "Companies",
-      "path": "/companies",
-      "block": "crm",
-      "component": "CompanyTable"
+      "label": "Analytics",
+      "path": "/analytics",
+      "block": "analytics",
+      "component": "AnalyticsScreen",
+      "icon": "BarChart3",
+      "group": "Insights",
+      "description": "Pipeline, engagement and team KPIs"
     },
     {
-      "label": "Lists",
-      "path": "/lists",
-      "block": "lists",
-      "component": "ListTable"
+      "label": "Call log",
+      "path": "/calls",
+      "block": "dialer",
+      "component": "CallLogScreen",
+      "icon": "PhoneCall",
+      "group": "Engage",
+      "description": "Every call with transcript and outcome"
     },
     {
-      "label": "Suppressions",
-      "path": "/suppressions",
-      "block": "lists",
-      "component": "SuppressionManager"
+      "label": "Coaching",
+      "path": "/coaching",
+      "block": "coach",
+      "component": "CoachScreen",
+      "icon": "GraduationCap",
+      "group": "Insights",
+      "description": "Scored calls and coaching feedback"
     },
     {
       "label": "Dialer",
       "path": "/dialer",
       "block": "dialer",
-      "component": "CallQueue"
-    },
-    {
-      "label": "Call log",
-      "path": "/calls",
-      "block": "dialer",
-      "component": "CallLog"
+      "component": "DialerScreen",
+      "icon": "Phone",
+      "group": "Engage",
+      "description": "Call queues and live sessions"
     },
     {
       "label": "Meetings",
       "path": "/meetings",
       "block": "appointments",
-      "component": "MeetingList"
+      "component": "MeetingsScreen",
+      "icon": "CalendarCheck",
+      "group": "Engage",
+      "description": "Booked, held and missed meetings"
     },
     {
-      "label": "Coaching",
-      "path": "/coaching",
-      "block": "coach",
-      "component": "CoachingFeed"
+      "label": "Scheduling",
+      "path": "/scheduling",
+      "block": "appointments",
+      "component": "SchedulingScreen",
+      "icon": "CalendarClock",
+      "group": "Setup",
+      "description": "Booking links and event types"
     },
     {
-      "label": "Analytics",
-      "path": "/analytics",
-      "block": "analytics",
-      "component": "KpiTiles"
+      "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"
+    },
+    {
+      "label": "Lists",
+      "path": "/lists",
+      "block": "lists",
+      "component": "ListsScreen",
+      "icon": "ListChecks",
+      "group": "Prospect",
+      "description": "Saved audiences you can sequence or sync"
+    },
+    {
+      "label": "Suppressions",
+      "path": "/suppressions",
+      "block": "lists",
+      "component": "SuppressionsScreen",
+      "icon": "ShieldOff",
+      "group": "Setup",
+      "description": "People and domains you never contact"
     }
   ]
 }

package/stacks/hootsuite.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "./stack.schema.json",
+  "id": "hootsuite",
+  "title": "Hootsuite-style social and content",
+  "summary": "Plan social posts and ads, publish landing pages and read the results in analytics.",
+  "status": "available",
+  "blocks": [
+    "foundation",
+    "crm",
+    "lists",
+    "social-ads",
+    "pages",
+    "analytics"
+  ],
+  "home": "/analytics",
+  "nav": [
+    {
+      "label": "Analytics",
+      "path": "/analytics",
+      "block": "analytics",
+      "component": "AnalyticsScreen",
+      "icon": "BarChart3",
+      "group": "Insights",
+      "description": "Pipeline, engagement and team KPIs"
+    },
+    {
+      "label": "Social",
+      "path": "/social",
+      "block": "social-ads",
+      "component": "SocialScreen",
+      "icon": "Share2",
+      "group": "Marketing",
+      "description": "Plan and publish social posts"
+    },
+    {
+      "label": "Ads",
+      "path": "/ads",
+      "block": "social-ads",
+      "component": "AdsScreen",
+      "icon": "Megaphone",
+      "group": "Marketing",
+      "description": "Ad campaigns and spend"
+    },
+    {
+      "label": "Pages",
+      "path": "/pages",
+      "block": "pages",
+      "component": "PagesScreen",
+      "icon": "LayoutTemplate",
+      "group": "Marketing",
+      "description": "Landing pages, brand kit and content"
+    },
+    {
+      "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"
+    },
+    {
+      "label": "Lists",
+      "path": "/lists",
+      "block": "lists",
+      "component": "ListsScreen",
+      "icon": "ListChecks",
+      "group": "Prospect",
+      "description": "Saved audiences you can sequence or sync"
+    },
+    {
+      "label": "Suppressions",
+      "path": "/suppressions",
+      "block": "lists",
+      "component": "SuppressionsScreen",
+      "icon": "ShieldOff",
+      "group": "Setup",
+      "description": "People and domains you never contact"
+    }
+  ]
+}

package/stacks/hubspot/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/hubspot/pages/contacts.tsx.tmpl

@@ -0,0 +1,111 @@
+"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 { 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
+      renderBulkActions={({ ids, clear }) => <AddToSequence contactIds={ids} onEnrolled={clear} />}
+      renderDetailActions={(c) => (
+        <>
+          <AddToSequence contactIds={[c.id]} />
+        </>
+      )}
+      extraDetailTabs={[{ id: "deals", label: "Deals", render: (c) => <LinkedDeals kind="contacts" id={c.id} /> }]}
+    />
+  );
+}

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