@graph8/sdk 0.362.0 → 0.370.0

package/blocks/inbox/components/reply-composer.tsx

@@ -9,7 +9,13 @@
  *      Returns { content (HTML), plain_content }; it delivers NOTHING.
  *   2. POST /inbox/{reply_id}/send   (inbox.sendReply)   EXTERNAL   -> ConfirmSpendDialog first
  *      Reaches a real person and cannot be recalled. A fixed Idempotency-Key per compose makes a double
- *      click or a retry safe.
+ *      click or a retry safe. Sends `from_address` = the thread's own sender (email mailbox, SMS number,
+ *      LinkedIn account id) and `to` = the thread's contact, so the reply leaves from the mailbox the
+ *      conversation is on. Before this the composer sent neither sender nor (for SMS) number, and the API
+ *      refused every email reply with 400 "'from_address' (mailbox) is required".
+ *   Only when an SMS or LinkedIn thread names no sender, one read fills a sender picker:
+ *      GET /sms/phone-numbers (channels.listSmsPhoneNumbers) or
+ *      GET /inbox/linkedin/accounts (aiInbox.listInboxLinkedinAccounts)   READ
  *
  * Both calls are gated by tier: nothing is billed or sent until the person clicks the dialog's button.
  */
@@ -18,9 +24,10 @@ import { useIdempotencyKey } from "../lib/idempotency";
 import { Button, Input, Textarea } from "@graph8/sdk/ui";
 import { ApiError } from "@/g8/components/api-error";
 import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
-import { g8Post } from "@/g8/lib/g8-client";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
 import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
-import { replyRecipient, stripHtml, type InboxThread } from "../lib/inbox-types";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { replyRecipient, replySender, senderOptions, stripHtml, type InboxThread } from "../lib/inbox-types";
 
 type DraftOperation = "generate_from_scratch" | "shorten" | "expand" | "fix_grammar_spelling";
 type Pending = { kind: "draft"; operation: DraftOperation } | { kind: "send" } | null;
@@ -51,10 +58,22 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
   const [body, setBody] = useState("");
   const [subject, setSubject] = useState(thread.subject ? (/^re:/i.test(thread.subject) ? thread.subject : `Re: ${thread.subject}`) : "");
   const [to, setTo] = useState(replyRecipient(thread));
+  const threadSender = replySender(thread);
+  const [from, setFrom] = useState(threadSender);
   const [tone, setTone] = useState<(typeof TONES)[number]>("professional");
   const [objective, setObjective] = useState<(typeof OBJECTIVES)[number]>("follow_up");
   const [pending, setPending] = useState<Pending>(null);
-  const idempotency = useIdempotencyKey(JSON.stringify([thread.channel, thread.id, body, to, channel === "email" ? subject : null]));
+  const idempotency = useIdempotencyKey(JSON.stringify([thread.channel, thread.id, body, to, from, channel === "email" ? subject : null]));
+  // SMS and LinkedIn cannot send without a sender; when the thread does not name one, offer the org's.
+  const needsSenderPick = !threadSender && (channel === "sms" || channel === "linkedin");
+  const senders = useG8Query(
+    async (signal) => {
+      const path = channel === "sms" ? "/sms/phone-numbers" : "/inbox/linkedin/accounts";
+      return senderOptions(channel, (await g8Get<unknown>(path, undefined, { signal })).data);
+    },
+    [channel, needsSenderPick],
+    { enabled: needsSenderPick },
+  );
   const threadKey = `${thread.channel}:${thread.id}`;
   const currentThread = useRef(threadKey);
   currentThread.current = threadKey;
@@ -64,6 +83,7 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
     setBody("");
     setSubject(thread.subject ? (/^re:/i.test(thread.subject) ? thread.subject : `Re: ${thread.subject}`) : "");
     setTo(replyRecipient(thread));
+    setFrom(replySender(thread));
     setPending(null);
     draft.reset();
     send.reset();
@@ -85,11 +105,18 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
   const send = useG8Mutation(async () => {
     const env = await g8Post<{ message_id?: string | null; status: string }>(
       `/inbox/${encodeURIComponent(thread.id)}/send`,
-      { body, channel, subject: channel === "email" ? subject : undefined, to: to || undefined },
+      {
+        body,
+        channel,
+        subject: channel === "email" ? subject : undefined,
+        to: to || undefined,
+        // Empty only for an email thread the list did not label; the API then uses the thread's mailbox.
+        from_address: from || undefined,
+      },
       { idempotencyKey: idempotency.get() },
     );
     return env.data;
-  });
+  }, { invalidates: ["inbox"] });
 
   const confirm = async () => {
     const current = pending;
@@ -112,7 +139,8 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
   };
 
   const busy = draft.loading || send.loading;
-  const canSend = body.trim().length > 0 && (channel === "linkedin" || to.trim().length > 0) && !busy;
+  const hasSender = channel === "email" || from.trim().length > 0;
+  const canSend = body.trim().length > 0 && (channel === "linkedin" || to.trim().length > 0) && hasSender && !busy;
   const canTransform = body.trim().length > 0 && !busy;
   const canDraft = Boolean(draftChannel(channel));
 
@@ -121,7 +149,33 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
       {channel === "email" ? (
         <Input aria-label="Subject" placeholder="Subject" value={subject} onChange={(e) => setSubject(e.target.value)} />
       ) : null}
-      <Input aria-label="To" placeholder={channel === "sms" ? "Phone number" : "Recipient"} value={to} onChange={(e) => setTo(e.target.value)} />
+      {needsSenderPick ? (
+        <div className="space-y-1 text-sm">
+          <select
+            aria-label="Send from"
+            className="h-9 w-full rounded-md border bg-background px-2"
+            value={from}
+            disabled={senders.loading}
+            onChange={(e) => setFrom(e.target.value)}
+          >
+            <option value="">{senders.loading ? "Loading senders..." : channel === "sms" ? "Choose the number to text from" : "Choose the LinkedIn account to send from"}</option>
+            {(senders.data ?? []).map((o) => (
+              <option key={o.value} value={o.value}>
+                {o.label}
+              </option>
+            ))}
+          </select>
+          {senders.error ? <ApiError error={senders.error} title="Could not load your senders" onRetry={() => void senders.refetch()} /> : null}
+          {!senders.loading && !senders.error && senders.data?.length === 0 ? (
+            <p className="text-muted-foreground">{channel === "sms" ? "No SMS numbers on this account yet." : "No LinkedIn accounts connected yet."}</p>
+          ) : null}
+        </div>
+      ) : from ? (
+        <p className="text-xs text-muted-foreground">From {channel === "linkedin" ? "your LinkedIn account" : from}</p>
+      ) : null}
+      {channel !== "linkedin" ? (
+        <Input aria-label="To" placeholder={channel === "sms" ? "Phone number" : "Recipient"} value={to} onChange={(e) => setTo(e.target.value)} />
+      ) : null}
       <Textarea aria-label="Reply" rows={6} placeholder="Write your reply" value={body} onChange={(e) => setBody(e.target.value)} />
 
       {canDraft ? (
@@ -172,7 +226,9 @@ export function ReplyComposer({ thread, onSent, className }: ReplyComposerProps)
         open={pending?.kind === "send"}
         tier="external"
         title={`Send this ${channel} reply?`}
-        description={`It goes to ${to || "the contact"} from your connected ${channel === "email" ? "mailbox" : channel} account.`}
+        description={`It goes to ${to || "the contact"} from ${
+          channel === "email" ? (from || "the thread's mailbox") : channel === "sms" ? from : "your LinkedIn account"
+        }.`}
         recipients={1}
         confirming={send.loading}
         onConfirm={() => void confirm()}

package/blocks/inbox/components/tag-and-assign.tsx

@@ -23,6 +23,7 @@ import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
 import { useG8Query } from "@/g8/hooks/use-g8-query";
 import type { InboxTag, InboxThread } from "../lib/inbox-types";
 import { ThreadBadge } from "./thread-badge";
+import { pluralWord } from "@/g8/lib/plural";
 
 type Pending = { kind: "tag"; ids: string[] } | { kind: "assign"; email: string } | null;
 interface TeamUser {
@@ -70,9 +71,10 @@ export function TagAndAssign({ thread, availableTags = [], onChanged, className
   const tag = useG8Mutation(async (ids: string[]) => {
     // Only the NEW ids: association can fire tag automations, so already-applied tags are not re-sent.
     return g8Post(`/inbox/${encodeURIComponent(thread.id)}/tag`, { tag_ids: ids.filter((id) => !applied.has(id)) }, { query: channelQuery });
-  });
+  }, { invalidates: ["inbox"] });
   const assign = useG8Mutation(async (email: string) =>
     g8Post(`/inbox/${encodeURIComponent(thread.id)}/assign`, { assignee_email: email }, { query: channelQuery }),
+    { invalidates: ["inbox"] },
   );
 
   const addTag = async () => {
@@ -132,7 +134,7 @@ export function TagAndAssign({ thread, availableTags = [], onChanged, className
           </Button>
         </div>
         <Button size="sm" disabled={selected.length === 0 || tag.loading} onClick={() => setPending({ kind: "tag", ids: selected })}>
-          Apply {selected.length > 0 ? `${selected.length} ` : ""}tag{selected.length === 1 ? "" : "s"}
+          Apply {selected.length > 0 ? `${selected.length} ` : ""}{pluralWord(selected.length, "tag")}
         </Button>
         {createTag.error ? <ApiError error={createTag.error} title="Could not create the tag" /> : null}
         {tag.error ? <ApiError error={tag.error} title="Could not apply the tags" /> : null}

package/blocks/inbox/hooks/use-inbox-thread.ts

@@ -19,6 +19,6 @@ export function useInboxThread(threadId: string | null | undefined, channel: str
       return env.data;
     },
     [threadId, channel],
-    { enabled: Boolean(threadId) },
+    { enabled: Boolean(threadId), key: ["inbox", "detail", threadId ?? null, channel ?? null] },
   );
 }

package/blocks/inbox/hooks/use-inbox-threads.ts

@@ -35,6 +35,7 @@ export function useInboxThreads(filters: InboxFilters, page = 1, pageSize = 25)
       return { threads: env.data ?? [], hasNext: Boolean(env.pagination?.has_next), total: (env.pagination as { total?: number } | undefined)?.total };
     },
     [filters.channel, filters.status, filters.tag, filters.sequenceId, page, pageSize],
+    { key: ["inbox", "list", { channel: filters.channel, status: filters.status, tag: filters.tag, sequenceId: filters.sequenceId, page, pageSize }] },
   );
   return { ...query, threads: query.data?.threads ?? [], hasNext: query.data?.hasNext ?? false, total: query.data?.total };
 }

package/blocks/inbox/lib/inbox-types.ts

@@ -46,6 +46,14 @@ export interface InboxThread {
   assignees: InboxAssignee[];
   created_at?: string | null;
   updated_at?: string | null;
+  /** Email: the connected mailbox the thread belongs to; a reply is sent from it. */
+  mailbox?: string | null;
+  /** SMS: your number the thread runs on; a reply is sent from it. */
+  from_number?: string | null;
+  /** SMS: the contact's number; a reply goes to it. */
+  to_number?: string | null;
+  /** LinkedIn: the account the conversation belongs to; a reply is sent from it. */
+  linkedin_account_id?: number | null;
 }
 
 /** Statuses `GET /inbox?status=` accepts (case-insensitive). Anything else is a 422. */
@@ -95,6 +103,44 @@ export function formatWhen(iso: string | null | undefined): string {
 /** Default recipient for a reply: the contact's address on the thread's channel. */
 export function replyRecipient(thread: InboxThread): string {
   const c = thread.contact;
-  if (thread.channel === "sms") return c?.phone ?? "";
+  if (thread.channel === "sms") return thread.to_number || c?.phone || "";
   return c?.email ?? "";
 }
+
+/**
+ * Default sender for a reply, as `POST /inbox/{id}/send` expects it in `from_address`: the thread's mailbox
+ * (email), your number on the thread (SMS) or the numeric LinkedIn account id. Empty when the thread does not
+ * say; the API then defaults email itself, and SMS/LinkedIn need a sender picked.
+ */
+export function replySender(thread: InboxThread): string {
+  if (thread.channel === "sms") return thread.from_number ?? "";
+  if (thread.channel === "linkedin") return thread.linkedin_account_id != null ? String(thread.linkedin_account_id) : "";
+  return thread.mailbox ?? "";
+}
+
+export interface SenderOption {
+  value: string;
+  label: string;
+}
+
+/**
+ * Senders for a picker from `GET /sms/phone-numbers` or `GET /inbox/linkedin/accounts`. Both answer with an
+ * untyped `{ items: [...] }` envelope (no response schema in the contract), so this reads defensively.
+ */
+export function senderOptions(channel: string, payload: unknown): SenderOption[] {
+  const raw = Array.isArray(payload) ? payload : ((payload as { items?: unknown[] } | null)?.items ?? []);
+  const out: SenderOption[] = [];
+  for (const item of raw as Array<Record<string, unknown>>) {
+    if (!item || typeof item !== "object") continue;
+    if (channel === "sms") {
+      const number = item.phone_number ?? item.number ?? item.phone;
+      if (typeof number === "string" && number) out.push({ value: number, label: String(item.friendly_name ?? item.label ?? number) });
+      continue;
+    }
+    const id = item.id ?? item.account_id ?? item.linkedin_account_id;
+    if (typeof id !== "number" && !(typeof id === "string" && /^\d+$/.test(id))) continue;
+    const name = [item.first_name ?? item.firstName, item.last_name ?? item.lastName].filter(Boolean).join(" ");
+    out.push({ value: String(id), label: String(name || item.name || item.email || item.emailAddress || `Account ${id}`) });
+  }
+  return out;
+}

package/blocks/inbox/recipes/01-triage-and-reply.ts

@@ -32,11 +32,21 @@ const draft = await g8.api.aiInbox.generateInboxDraft({
 });
 const html = (draft.data as { content?: string }).content ?? "";
 
-// 4. EXTERNAL: send. Reuse the same idempotency key if you retry this exact call.
+// 4. EXTERNAL: send from the thread's own mailbox (`mailbox`) to its contact. Reuse the same idempotency key if
+// you retry this exact call. When `from_address` / `to` are omitted the API fills both from the thread, but
+// graph8 APIs older than contract 1.374.0 refuse the send with 400, so name them.
+const mailbox = full.data.mailbox ?? undefined;
+const contactEmail = (full.data.contact as { email?: string | null } | null | undefined)?.email ?? undefined;
 const sent = await g8.api.inbox.sendReply(
   {
     path: { reply_id: thread.id },
-    body: { channel: "email", body: html, subject: full.data.subject ? `Re: ${full.data.subject}` : null },
+    body: {
+      channel: "email",
+      body: html,
+      subject: full.data.subject ? `Re: ${full.data.subject}` : null,
+      from_address: mailbox,
+      to: contactEmail,
+    },
   },
   { idempotencyKey: randomUUID() },
 );

package/blocks/integrations/README.md

@@ -5,6 +5,15 @@ Apollo / Salesforce "integrations" settings screen.
 
 Depends on: `foundation`. Install: `npx @graph8/sdk add integrations`.
 
+## Screens
+
+`IntegrationsScreen` (`components/integrations-screen.tsx`) is the finished page: copy it as your route. No props are required.
+
+- **Connections tab**: the five CRMs and the workspace tools. "Manage sync" opens a side panel with sync switches, job progress and a manual
+  push (deep link `?id=hubspot`; a webhook is `?tab=webhooks&id=<webhook id>`). Connecting is a link out to the graph8 app, because OAuth consent only runs there.
+- **Webhooks tab**: create, pause, rotate and delete webhooks, read deliveries. The secret is shown once.
+- Props (all optional): `connectUrl`, `defaultWebhookUrl`, `pushRecords`, `toolbarActions`, `renderDetailActions(record)`, `extraDetailTabs` (each `{ id, label, render(record) }`), where `record` is `{ kind: "crm", provider }` or `{ kind: "webhook", id }`.
+
 ## Components
 
 | Component | What it does | Tiers |

package/blocks/integrations/block.json

@@ -85,6 +85,50 @@
         "external",
         "destructive"
       ]
+    },
+    {
+      "name": "IntegrationsScreen",
+      "file": "components/integrations-screen.tsx",
+      "purpose": "Finished integrations page: CRM and tool connections with a sync side panel, plus webhook management.",
+      "operations": [
+        "list_crm_syncs_crm_syncs_get",
+        "list_webhooks_webhooks_get"
+      ],
+      "tiers": [
+        "read"
+      ]
+    },
+    {
+      "name": "CrmDetail",
+      "file": "components/crm-detail.tsx",
+      "purpose": "Complete screen for one CRM integration: connection, sync switches, manual push, disconnect.",
+      "operations": [
+        "list_crm_syncs_crm_syncs_get",
+        "list_connections_integrations_connections_get",
+        "delete_connection_integrations_connections__connection_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "destructive"
+      ]
+    },
+    {
+      "name": "WebhookDetail",
+      "file": "components/webhook-detail.tsx",
+      "purpose": "Complete screen for one webhook: every field, edit, deliveries, pause, rotate secret, delete.",
+      "operations": [
+        "list_webhooks_webhooks_get",
+        "list_webhook_events_webhooks_events_get",
+        "list_webhook_deliveries_webhooks__webhook_id__deliveries_get",
+        "update_webhook_webhooks__webhook_id__patch",
+        "rotate_webhook_secret_webhooks__webhook_id__rotate_secret_post",
+        "delete_webhook_webhooks__webhook_id__delete"
+      ],
+      "tiers": [
+        "read",
+        "external",
+        "destructive"
+      ]
     }
   ],
   "hooks": [],
@@ -167,6 +211,7 @@
     }
   ],
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "lucide-react": ">=0.400"
   }
 }

package/blocks/integrations/components/crm-detail.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+/**
+ * CrmDetail: the complete screen for one CRM integration (HubSpot, Salesforce, Pipedrive, Zoho, SugarCRM). Shows its connection
+ * (status, connected and last sync time, connection id), the continuous sync switches, job progress, manual push and contact fields
+ * (SyncStatus), and the actions: disconnect (destructive) when connected, or a link to connect in graph8 when it is not.
+ * Connecting is a link out: the OAuth consent screen only runs in the graph8 app.
+ *
+ * SDK operations, in order:
+ *   1. listCrmSyncs     GET    /crm-syncs                                       (read)
+ *   2. listConnections  GET    /integrations/connections                        (read; the connection to disconnect)
+ *   3. deleteConnection DELETE /integrations/connections/{id}?provider_config_key= (destructive, confirmed)
+ *   4. SyncStatus       see sync-status.tsx (getCrmStatus, getCrmFields, set push/pull enabled, getSyncJob, pushContactsToCrm)
+ */
+import type { ReactNode } from "react";
+import { Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { g8Delete, g8Get } from "@/g8/lib/g8-client";
+import { DetailPanel } from "@/g8/components/screen/detail-panel";
+import { EntityAvatar } from "@/g8/components/screen/entity-avatar";
+import { KeyValueList } from "@/g8/components/screen/key-value-list";
+import { StatusPill } from "@/g8/components/screen/status-pill";
+import { arrayOf, formatWhen, GRAPH8_APP_INTEGRATIONS_PATH, PROVIDER_LABELS } from "../lib/integrations-utils";
+import type { ConnectionRow, CrmProvider, CrmSyncRow } from "../lib/integrations-utils";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { AskButton, useConfirmAction } from "@/g8/components/confirmed-action";
+import { SyncStatus } from "./sync-status";
+import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
+
+export interface CrmDetailProps {
+  provider: CrmProvider;
+  /** Where "Connect in graph8" sends the person. */
+  connectUrl?: string;
+  /** Contact records (in the CRM's field names) offered for a manual push. */
+  records?: ReadonlyArray<Record<string, unknown>>;
+  onClose?: () => void;
+  onExpand?: () => void;
+  onCollapse?: () => void;
+  onChanged?: () => void;
+  /** Extra header actions from the screen's `renderDetailActions` slot. */
+  extraActions?: ReactNode;
+  /** Extra tabs from the screen's `extraDetailTabs` slot, after the built-in ones. */
+  extraTabs?: { id: string; label: string; content: ReactNode }[];
+}
+
+const CONNECTED = ["connected", "active", "ok", "healthy", "syncing", "synced", "enabled", "linked"];
+
+export function CrmDetail({ provider, connectUrl: connectUrlProp, records, onClose, onExpand, onCollapse, onChanged, extraActions, extraTabs }: CrmDetailProps) {
+  const brand = useBrand();
+  const connectUrl = connectUrlProp ?? brandUrl(brand, GRAPH8_APP_INTEGRATIONS_PATH);
+  const { ask, dialog, failure } = useConfirmAction();
+  const syncs = useG8Query((signal) => g8Get("/crm-syncs", undefined, { signal }), []);
+  const connections = useG8Query((signal) => g8Get("/integrations/connections", undefined, { signal }), []);
+  const label = PROVIDER_LABELS[provider];
+
+  if (syncs.error) return <ApiError error={syncs.error} title="Could not load the integration" onRetry={() => void syncs.refetch()} />;
+  if (!syncs.data) return <Skeleton className="h-40 w-full" />;
+  const row = arrayOf<CrmSyncRow>(syncs.data).find((r) => r.provider?.toLowerCase() === provider);
+  const connected = Boolean(row && CONNECTED.includes(row.status?.toLowerCase()));
+  const all = arrayOf<ConnectionRow>(connections.data).filter((c) => (c.provider ?? "").toLowerCase() === provider || (c.provider_config_key ?? "").toLowerCase().split(/[-_]/)[0] === provider);
+  const connection = all.find((c) => row?.connection_id && c.connection_id === row.connection_id) ?? (all.length === 1 ? all[0] : undefined);
+  const changed = () => { void syncs.refetch(); void connections.refetch(); onChanged?.(); };
+
+  const actions = connected ? (
+    <AskButton ask={ask} label="Disconnect" variant="ghost" tier="destructive" title={`Disconnect ${label}`} confirmLabel="Disconnect"
+      disabled={!connection?.connection_id || !connection.provider_config_key}
+      description="Syncs configured against this connection stop working. Records already synced stay."
+      run={() => g8Delete(`/integrations/connections/${connection!.connection_id}`, { query: { provider_config_key: connection!.provider_config_key } })} onDone={changed} />
+  ) : (
+    <a className="text-sm underline" href={connectUrl} target="_blank" rel="noreferrer">Connect in {brand.linkLabel}</a>
+  );
+
+  const tabs = [
+    {
+      id: "overview",
+      label: "Overview",
+      content: (
+        <KeyValueList columns={2} items={[
+          { label: "Provider", value: label },
+          { label: "Status", value: row?.status ?? "not connected" },
+          { label: "Connected", value: formatWhen(row?.connected_at) },
+          { label: "Last sync", value: formatWhen(row?.last_sync_at) },
+          { label: "Connection", value: row?.connection_id ?? connection?.connection_id ?? "-" },
+          { label: "Config key", value: connection?.provider_config_key ?? "-" },
+        ]} />
+      ),
+    },
+    { id: "sync", label: "Sync", content: <SyncStatus provider={provider} records={records} /> },
+  ];
+  return (
+    <>
+    <DetailPanel title={label} subtitle="CRM integration" avatar={<EntityAvatar name={label} kind="company" size="lg" />}
+      badges={<StatusPill tone={connected ? "positive" : "neutral"}>{connected ? "Connected" : row?.status ?? "Not connected"}</StatusPill>}
+      actions={extraActions ? <>{actions}{extraActions}</> : actions} tabs={extraTabs?.length ? [...tabs, ...extraTabs] : tabs} onClose={onClose} onExpand={onExpand} onCollapse={onCollapse} />
+      {failure ? <ApiError error={failure} title="That did not work" /> : null}
+      <ConfirmSpendDialog {...dialog} />
+    </>
+  );
+}

package/blocks/integrations/components/integration-list.tsx

@@ -26,17 +26,20 @@ import {
   arrayOf,
   CRM_PROVIDERS,
   formatWhen,
-  GRAPH8_APP_INTEGRATIONS_URL,
+  GRAPH8_APP_INTEGRATIONS_PATH,
   looksConnected,
   PROVIDER_LABELS,
 } from "../lib/integrations-utils";
 import type { ConnectionRow, CrmProvider, CrmSyncRow } from "../lib/integrations-utils";
+import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
 
 export interface IntegrationListProps {
   /** Where "Connect" sends the person. Default: graph8 Settings > Integrations. */
   connectUrl?: string;
   /** Called when the person opens a CRM's sync panel (render SyncStatus for it). */
   onOpenSync?: (provider: CrmProvider) => void;
+  /** Called when a person opens any CRM, connected or not (show a CrmDetail). */
+  onSelectCrm?: (provider: CrmProvider) => void;
   className?: string;
 }
 
@@ -78,7 +81,9 @@ function ChatTools() {
   );
 }
 
-export function IntegrationList({ connectUrl = GRAPH8_APP_INTEGRATIONS_URL, onOpenSync, className }: IntegrationListProps) {
+export function IntegrationList({ connectUrl: connectUrlProp, onOpenSync, onSelectCrm, className }: IntegrationListProps) {
+  const brand = useBrand();
+  const connectUrl = connectUrlProp ?? brandUrl(brand, GRAPH8_APP_INTEGRATIONS_PATH);
   const [disconnecting, setDisconnecting] = useState<{ provider: CrmProvider; connection: ConnectionRow } | null>(null);
   const syncs = useG8Query((signal) => g8Get("/crm-syncs", undefined, { signal }), []);
   const connections = useG8Query((signal) => g8Get("/integrations/connections", undefined, { signal }), []);
@@ -113,7 +118,7 @@ export function IntegrationList({ connectUrl = GRAPH8_APP_INTEGRATIONS_URL, onOp
           return (
             <li key={p} className="flex flex-wrap items-center justify-between gap-2 px-3 py-3" data-provider={p}>
               <div>
-                <div className="font-medium">{PROVIDER_LABELS[p]}</div>
+                {onSelectCrm ? <button type="button" className="font-medium hover:underline" onClick={() => onSelectCrm(p)}>{PROVIDER_LABELS[p]}</button> : <div className="font-medium">{PROVIDER_LABELS[p]}</div>}
                 <div className="text-xs text-gray-500">
                   {connected ? `Last sync: ${formatWhen(row?.last_sync_at)}` : "Connect to sync contacts and companies."}
                 </div>
@@ -137,7 +142,7 @@ export function IntegrationList({ connectUrl = GRAPH8_APP_INTEGRATIONS_URL, onOp
                 ) : (
                   <Button size="sm" asChild>
                     <a href={connectUrl} target="_blank" rel="noreferrer">
-                      Connect in graph8
+                      Connect in {brand.linkLabel}
                     </a>
                   </Button>
                 )}

package/blocks/integrations/components/integrations-screen.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+/**
+ * IntegrationsScreen: the finished integrations settings page. Two tabs:
+ *   Connections  the five CRMs and the workspace tools with their status (IntegrationList). Every CRM, connected or not, opens its
+ *                complete detail screen (CrmDetail: connection, push/pull switches, job progress, manual push, disconnect; `?id=hubspot`).
+ *                "Connect in graph8" links out: the OAuth consent screen only runs in the graph8 app.
+ *   Webhooks     create webhooks (WebhookManager); each opens its complete detail screen (WebhookDetail: every field, edit, deliveries,
+ *                pause, rotate secret, delete; `?id=`). Every detail also opens as a full page with `?view=full`.
+ *
+ * SDK operations: two reads for the stat strip (GET /crm-syncs, GET /webhooks). Composes IntegrationList (read +
+ * destructive, confirmed), SyncStatus (external, confirmed) and WebhookManager (external + destructive, confirmed).
+ * Prerequisites: a CRM connected in the app (where: "app"); a public https route with G8_WEBHOOK_SECRET for webhooks.
+ */
+import type { ReactNode } from "react";
+import { useState } from "react";
+import { Plug } from "lucide-react";
+import { g8Get } from "@/g8/lib/g8-client";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { ScreenLayout } from "@/g8/components/screen/screen-layout";
+import type { StatItem } from "@/g8/components/screen/stat-strip";
+import { SplitView } from "@/g8/components/screen/split-view";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { arrayOf, CRM_PROVIDERS, GRAPH8_APP_INTEGRATIONS_PATH, PROVIDER_LABELS } from "../lib/integrations-utils";
+import type { CrmProvider, CrmSyncRow } from "../lib/integrations-utils";
+import { IntegrationList } from "./integration-list";
+import { CrmDetail } from "./crm-detail";
+import { WebhookDetail } from "./webhook-detail";
+import { WebhookManager } from "./webhook-manager";
+import { brandUrl, useBrand } from "@/g8/hooks/use-brand";
+
+export interface IntegrationsScreenProps {
+  /** Where "Connect" sends people. Default: graph8 Settings > Integrations. */
+  connectUrl?: string;
+  /** Pre-fill the webhook endpoint URL (your /api/webhooks/graph8 route). */
+  defaultWebhookUrl?: string;
+  /** Contact records (in the CRM's field names) offered for a manual push in the sync panel. */
+  pushRecords?: ReadonlyArray<Record<string, unknown>>;
+  toolbarActions?: ReactNode;
+  /** Buttons added to the open record's header: a CRM connection or a webhook. */
+  renderDetailActions?: (record: IntegrationRecord) => ReactNode;
+  /** Tabs added after the built-in ones on the open record. */
+  extraDetailTabs?: { id: string; label: string; render: (record: IntegrationRecord) => ReactNode }[];
+  className?: string;
+}
+
+/** The record open in the detail panel, passed to the slot props. */
+export type IntegrationRecord = { kind: "crm"; provider: CrmProvider } | { kind: "webhook"; id: string };
+
+const CONNECTED = ["connected", "active", "ok", "healthy", "syncing", "synced", "enabled", "linked"];
+
+function useStats(): StatItem[] | undefined {
+  const syncs = useG8Query((signal) => g8Get("/crm-syncs", undefined, { signal }), []);
+  const hooks = useG8Query((signal) => g8Get("/webhooks", undefined, { signal }), []);
+  if (syncs.error) return undefined;
+  const rows = arrayOf<CrmSyncRow>(syncs.data);
+  const connected = rows.filter((r) => CONNECTED.includes(r.status?.toLowerCase())).length;
+  const items: StatItem[] = [
+    { label: "CRMs connected", value: `${connected} of ${CRM_PROVIDERS.length}`, tone: connected ? "positive" : "neutral" },
+  ];
+  if (!hooks.error && hooks.data) items.push({ label: "Webhooks", value: arrayOf<unknown>(hooks.data).length });
+  return syncs.data ? items : undefined;
+}
+
+export function IntegrationsScreen(props: IntegrationsScreenProps) {
+  const brand = useBrand();
+  const connectUrl = props.connectUrl ?? brandUrl(brand, GRAPH8_APP_INTEGRATIONS_PATH);
+  const [tabValue, setTab] = useUrlState("tab", "connections");
+  const tab = tabValue === "webhooks" ? "webhooks" : "connections";
+  const [id, setId] = useUrlState("id", "");
+  const [view, setView] = useUrlState("view", "");
+  const expanded = view === "full" && Boolean(id);
+  const [tick, setTick] = useState(0);
+  const stats = useStats();
+  const close = () => {
+    setId("");
+    setView("");
+  };
+  const panel = {
+    onClose: close,
+    onExpand: expanded ? undefined : () => setView("full"),
+    onCollapse: expanded ? () => setView("") : undefined,
+    onChanged: () => setTick((t) => t + 1),
+  };
+  const provider = (CRM_PROVIDERS as readonly string[]).includes(id) ? (id as CrmProvider) : null;
+  const slots = (record: IntegrationRecord) => ({
+    extraActions: props.renderDetailActions?.(record),
+    extraTabs: (props.extraDetailTabs ?? []).map((t) => ({ id: t.id, label: t.label, content: t.render(record) })),
+  });
+  const split = (list: ReactNode, detail: ReactNode, open: boolean) => (
+    <SplitView detailOpen={open} onCloseDetail={close} expanded={expanded} onExpandedChange={(next) => setView(next ? "full" : "")} detailWidth="lg" list={list} detail={open ? detail : null} />
+  );
+
+  return (
+    <ScreenLayout
+      title="Integrations"
+      description={`Connect your CRM, keep it in sync, and send ${brand.linkLabel} events to your own systems.`}
+      icon={<Plug className="size-5" />}
+      actions={props.toolbarActions}
+      tabs={[
+        { id: "connections", label: "Connections" },
+        { id: "webhooks", label: "Webhooks" },
+      ]}
+      activeTab={tab}
+      onTabChange={(next) => {
+        setTab(next);
+        close();
+      }}
+      stats={stats}
+      className={props.className}
+    >
+      {tab === "connections" ? (
+        <div className="space-y-4">
+          <SectionCard title="Connecting an account" description={`Sign-in with your CRM happens in ${brand.linkLabel}. Connect there, then manage the sync here.`}>
+            <a className="text-sm underline" href={connectUrl} target="_blank" rel="noreferrer">
+              Connect in {brand.linkLabel}
+            </a>
+          </SectionCard>
+          {split(
+            <IntegrationList key={tick} connectUrl={connectUrl} onSelectCrm={(p) => setId(p)} onOpenSync={(p) => setId(p)} />,
+            provider ? <CrmDetail key={provider} provider={provider} connectUrl={connectUrl} records={props.pushRecords} {...panel} {...slots({ kind: "crm", provider })} /> : null,
+            provider != null,
+          )}
+        </div>
+      ) : (
+        split(
+          <WebhookManager key={tick} defaultUrl={props.defaultWebhookUrl} onSelectWebhook={(h) => setId(h.id)} />,
+          <WebhookDetail key={id} webhookId={id} {...panel} {...slots({ kind: "webhook", id })} />,
+          Boolean(id),
+        )
+      )}
+    </ScreenLayout>
+  );
+}