@graph8/sdk 0.370.0 → 0.374.0

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

@@ -54,7 +54,7 @@ const CHAT_TOOLS = [
 
 function Pill({ on, label }: { on: boolean; label?: string }) {
   return (
-    <span className={`rounded px-2 py-0.5 text-xs font-medium ${on ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-700"}`}>
+    <span className={`rounded px-2 py-0.5 text-xs font-medium ${on ? "bg-positive text-positive-foreground" : "bg-muted text-foreground"}`}>
       {label ?? (on ? "Connected" : "Not connected")}
     </span>
   );
@@ -70,7 +70,7 @@ function ChatTools() {
   }, []);
   if (state.loading && !state.data) return <Skeleton className="h-10 w-full" />;
   return (
-    <ul className="divide-y rounded border border-gray-200" aria-label="Workspace tools">
+    <ul className="divide-y rounded border border-border" aria-label="Workspace tools">
       {(state.data ?? []).map((t) => (
         <li key={t.key} className="flex items-center justify-between px-3 py-2 text-sm">
           <span>{t.label}</span>
@@ -110,7 +110,7 @@ export function IntegrationList({ connectUrl: connectUrlProp, onOpenSync, onSele
 
   return (
     <div className={`space-y-4 ${className ?? ""}`}>
-      <ul className="divide-y rounded border border-gray-200" aria-label="CRM integrations">
+      <ul className="divide-y rounded border border-border" aria-label="CRM integrations">
         {CRM_PROVIDERS.map((p) => {
           const row = byProvider(p);
           const connected = Boolean(row && CONNECTED_STATES.includes(row.status?.toLowerCase()));
@@ -119,7 +119,7 @@ export function IntegrationList({ connectUrl: connectUrlProp, onOpenSync, onSele
             <li key={p} className="flex flex-wrap items-center justify-between gap-2 px-3 py-3" data-provider={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">
+                <div className="text-xs text-muted-foreground">
                   {connected ? `Last sync: ${formatWhen(row?.last_sync_at)}` : "Connect to sync contacts and companies."}
                 </div>
               </div>

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

@@ -8,8 +8,15 @@
  *   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`.
  *
+ *   Tools      Slack, Google Workspace and Roam with live status, a connect link-out for each that is not connected, a Google connection
+ *              test and a Drive folder browser (WorkspaceTools).
+ *   Ad accounts  the ad platforms graph8 can sync audiences to, which are connected, their accounts, and a warning for any the platform
+ *              has paused (AdAccounts).
+ * A connected CRM's detail also has Health, Sync now, CRM records, Fields and Historic import tabs (see CrmDetail).
+ *
  * 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).
+ * destructive, confirmed), SyncStatus and SyncTriggers (external, confirmed), WebhookManager (external + destructive, confirmed),
+ * WorkspaceTools and AdAccounts (reads).
  * Prerequisites: a CRM connected in the app (where: "app"); a public https route with G8_WEBHOOK_SECRET for webhooks.
  */
 import type { ReactNode } from "react";
@@ -24,7 +31,9 @@ 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 { AdAccounts } from "./ad-accounts";
 import { IntegrationList } from "./integration-list";
+import { WorkspaceTools } from "./workspace-tools";
 import { CrmDetail } from "./crm-detail";
 import { WebhookDetail } from "./webhook-detail";
 import { WebhookManager } from "./webhook-manager";
@@ -67,13 +76,15 @@ 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 tab = ["webhooks", "tools", "ads"].includes(tabValue) ? tabValue : "connections";
   const [id, setId] = useUrlState("id", "");
   const [view, setView] = useUrlState("view", "");
+  const [, setMigration] = useUrlState("migration", "");
   const expanded = view === "full" && Boolean(id);
   const [tick, setTick] = useState(0);
   const stats = useStats();
   const close = () => {
+    setMigration("");
     setId("");
     setView("");
   };
@@ -101,6 +112,8 @@ export function IntegrationsScreen(props: IntegrationsScreenProps) {
       tabs={[
         { id: "connections", label: "Connections" },
         { id: "webhooks", label: "Webhooks" },
+        { id: "tools", label: "Tools" },
+        { id: "ads", label: "Ad accounts" },
       ]}
       activeTab={tab}
       onTabChange={(next) => {
@@ -118,11 +131,15 @@ export function IntegrationsScreen(props: IntegrationsScreenProps) {
             </a>
           </SectionCard>
           {split(
-            <IntegrationList key={tick} connectUrl={connectUrl} onSelectCrm={(p) => setId(p)} onOpenSync={(p) => setId(p)} />,
+            <IntegrationList key={tick} connectUrl={connectUrl} onSelectCrm={(p) => { setMigration(""); setId(p); }} onOpenSync={(p) => { setMigration(""); setId(p); }} />,
             provider ? <CrmDetail key={provider} provider={provider} connectUrl={connectUrl} records={props.pushRecords} {...panel} {...slots({ kind: "crm", provider })} /> : null,
             provider != null,
           )}
         </div>
+      ) : tab === "tools" ? (
+        <WorkspaceTools connectUrl={connectUrl} />
+      ) : tab === "ads" ? (
+        <AdAccounts connectUrl={connectUrl} />
       ) : (
         split(
           <WebhookManager key={tick} defaultUrl={props.defaultWebhookUrl} onSelectWebhook={(h) => setId(h.id)} />,

package/blocks/integrations/components/migration-panel.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+/**
+ * MigrationPanel: bring a CRM's history into graph8, and keep it current afterwards. Three steps for a connected CRM:
+ *   1. Scan   look at the CRM and count what is there (nothing is imported yet).
+ *   2. Review the counts per kind of record, the warnings, then Import (or Cancel). Importing copies the CRM's records into graph8.
+ *   3. Later  "Sync changes" brings in only what changed in the CRM since the last import.
+ * Progress is polled until the run reaches a resting state (waiting for you, finished, failed or cancelled). The last completed import,
+ * if any, is shown first. Scanning and importing change data and read a lot from the CRM, so each goes through ConfirmSpendDialog
+ * (external); cancelling a run is destructive and confirmed. Salesforce record owners that are not in the workspace need a decision or the API
+ * refuses the confirm, so each unmatched owner is sent as an "unassigned" decision (their records are imported without an owner; nothing is
+ * invited or reassigned from here). Choosing something else per owner is done in the app.
+ *
+ * SDK operations, in order:
+ *   1. getLastCompletedMigration  GET  /integrations/connections/{connection_id}/last-migration   (read)
+ *   2. startMigrationDiscovery    POST /integrations/migrations/discovery { connection_id, crm_type }   (external, confirmed)
+ *   3. getMigrationStatus         GET  /integrations/migrations/{migration_id}                     (read, polled)
+ *   4. confirmMigration           POST /integrations/migrations/{migration_id}/confirm {}          (external, confirmed)
+ *   5. cancelMigration            POST /integrations/migrations/{migration_id}/cancel              (destructive, confirmed)
+ *   6. startDeltaSync             POST /integrations/migrations/delta-sync { connection_id, recover_missing: false }   (external, confirmed)
+ * The id of a started run is kept in the page's address (?migration=), so reloading does not lose a run that is still going.
+ */
+import { useEffect, useRef, useState } from "react";
+import { Button, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill, toneForStatus } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { useUrlState } from "@/g8/hooks/use-url-state";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { FactList } from "../lib/facts";
+import { crmType, PROVIDER_LABELS } from "../lib/integrations-utils";
+import { useBrand } from "@/g8/hooks/use-brand";
+import type { CrmProvider } from "../lib/integrations-utils";
+
+export interface MigrationPanelProps {
+  connectionId: string;
+  provider: CrmProvider;
+  className?: string;
+}
+
+interface Migration { migration_id?: string; status: string; phase?: string | null; overall_percent?: number; eta_seconds?: number | null; entities?: Record<string, Record<string, unknown> | number>; warnings?: Array<{ message?: string; code?: string }>; errors?: Array<{ message?: string; code?: string }>; owners?: Array<{ sf_user_id?: string; match?: { status?: string } }> }
+type Ask = "scan" | "import" | "cancel" | "delta";
+const REST = ["awaiting_confirmation", "paused", "completed", "failed", "cancelled"];
+const enc = encodeURIComponent;
+const text = (w: { message?: string; code?: string }): string => w.message ?? w.code ?? "See the app for details.";
+
+/**
+ * Salesforce owners who are not in graph8 and have no match need a decision or the confirm is refused (422). The default keeps the import
+ * unattended and reversible: their records are imported unassigned (the "unassigned" action). Nothing is invited or reassigned from here.
+ */
+export function ownerDecisions(owners: Migration["owners"]): Array<{ sf_user_id: string; action: "unassigned" }> {
+  return (owners ?? []).filter((o) => o.sf_user_id && o.match?.status === "unmatched").map((o) => ({ sf_user_id: o.sf_user_id as string, action: "unassigned" as const }));
+}
+
+export function MigrationPanel({ connectionId, provider, className }: MigrationPanelProps) {
+  const brand = useBrand();
+  const label = PROVIDER_LABELS[provider];
+  const [id, setId] = useUrlState("migration", "");
+  const [ask, setAsk] = useState<Ask | null>(null);
+  // A run belongs to the connection it was started for: switching connection drops it (and its URL id) so it can never be confirmed under another CRM.
+  const first = useRef(true);
+  useEffect(() => { setAsk(null); if (first.current) { first.current = false; return; } setId(""); }, [connectionId]); // eslint-disable-line react-hooks/exhaustive-deps
+  const last = useG8Query((signal) => g8Get(`/integrations/connections/${enc(connectionId)}/last-migration`, undefined, { signal }), [connectionId]);
+  const poll = useJobPoll<Migration>(async (signal) => (await g8Get<Migration>(`/integrations/migrations/${enc(id)}`, undefined, { signal })).data, { isTerminal: (m) => REST.includes(String(m.status).toLowerCase()), enabled: Boolean(id), intervalMs: 3000, maxIntervalMs: 15000 });
+  useEffect(() => { if (id) poll.start(); }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
+  const m = poll.status;
+  const status = String(m?.status ?? "").toLowerCase();
+
+  const started = (res: { data?: { migration_id?: string; id?: string } }) => { const next = res.data?.migration_id ?? res.data?.id; if (next) setId(next); setAsk(null); };
+  const scan = useG8Mutation(() => g8Post<{ migration_id?: string }>("/integrations/migrations/discovery", { connection_id: connectionId, crm_type: crmType(provider) }), { onSuccess: started, onError: () => setAsk(null) });
+  const delta = useG8Mutation(() => g8Post<{ migration_id?: string }>("/integrations/migrations/delta-sync", { connection_id: connectionId, recover_missing: false }), { onSuccess: started, onError: () => setAsk(null) });
+  const confirm = useG8Mutation(() => g8Post(`/integrations/migrations/${enc(id)}/confirm`, decisions.length ? { owner_decisions: decisions } : {}), { onSuccess: () => { setAsk(null); poll.start(); }, onError: () => setAsk(null) });
+  const cancel = useG8Mutation(() => g8Post(`/integrations/migrations/${enc(id)}/cancel`, {}), { onSuccess: () => { setAsk(null); poll.start(); }, onError: () => setAsk(null) });
+  const busy = ask === "scan" ? scan.loading : ask === "import" ? confirm.loading : ask === "cancel" ? cancel.loading : delta.loading;
+  const lastRun = ((last.data as { data?: { migration?: Record<string, unknown> | null } } | undefined)?.data?.migration) ?? null;
+  const entities = Object.entries(m?.entities ?? {});
+  const decisions = ownerDecisions(m?.owners);
+
+  const COPY: Record<Ask, { tier: "external" | "destructive"; title: string; description: string; confirm: string }> = {
+    scan: { tier: "external", title: `Scan ${label}`, description: `${brand.name} reads ${label} to count what it holds. Nothing is imported until you confirm the import.`, confirm: "Scan" },
+    import: { tier: "external", title: `Import from ${label}`, description: `Copies the ${label} records counted below into ${brand.name} and can take a long time.${decisions.length ? ` ${decisions.length} record owner${decisions.length === 1 ? " is" : "s are"} not in ${brand.name}; their records are imported unassigned.` : ""}`, confirm: "Import" },
+    cancel: { tier: "destructive", title: "Cancel this import", description: `The run stops where it is. Records already copied stay in ${brand.name}.`, confirm: "Cancel import" },
+    delta: { tier: "external", title: `Sync changes from ${label}`, description: `Brings in only the records that changed in ${label} since the last import.`, confirm: "Sync changes" },
+  };
+  const c = ask ? COPY[ask] : null;
+  const run = () => void (ask === "scan" ? scan : ask === "import" ? confirm : ask === "cancel" ? cancel : delta).mutate(undefined);
+
+  return (
+    <div className={`flex flex-col gap-4 ${className ?? ""}`}>
+      <SectionCard title="Last completed import" actions={<Button size="sm" variant="ghost" onClick={() => void last.refetch()}>Recheck</Button>}>
+        {last.error ? <ApiError error={last.error} title="Could not check the last import" onRetry={() => void last.refetch()} /> : null}
+        {last.loading && !last.data ? <Skeleton className="h-8 w-full" /> : null}
+        {last.data && !last.error ? (lastRun ? <FactList data={lastRun} /> : <p className="text-sm text-muted-foreground">No import has completed for this connection.</p>) : null}
+      </SectionCard>
+      <div className="flex flex-wrap gap-2">
+        <Button onClick={() => setAsk("scan")}>Scan {label}</Button>
+        <Button variant="outline" onClick={() => setAsk("delta")}>Sync changes</Button>
+      </div>
+      {scan.error ? <ApiError error={scan.error} title="Could not start the scan" /> : null}
+      {delta.error ? <ApiError error={delta.error} title="Could not start the sync" /> : null}
+      {id ? (
+        <SectionCard title="Current run" description={id} actions={<Button size="sm" variant="ghost" onClick={() => setId("")}>Hide</Button>}>
+          {poll.error && !m ? <ApiError error={poll.error} title="Could not read the run" onRetry={() => poll.start()} /> : null}
+          {!m && !poll.error ? <Skeleton className="h-12 w-full" aria-label="Loading run" /> : null}
+          {m ? (
+            <div className="flex flex-col gap-3">
+              <div className="flex flex-wrap items-center gap-2">
+                <StatusPill tone={toneForStatus(status)} dot>{status.replace(/_/g, " ")}</StatusPill>
+                {m.phase ? <span className="text-xs text-muted-foreground">{String(m.phase).replace(/_/g, " ")}</span> : null}
+                {typeof m.overall_percent === "number" ? <span className="text-xs text-muted-foreground">{Math.round(m.overall_percent)}%</span> : null}
+                {poll.polling ? <span className="text-xs text-muted-foreground">updating</span> : null}
+              </div>
+              {entities.length ? <ul className="divide-y rounded-md border text-sm" aria-label="Records found">{entities.map(([k, v]) => <li key={k} className="flex justify-between px-3 py-1.5"><span>{k.replace(/_/g, " ")}</span><span className="text-muted-foreground">{typeof v === "number" ? v.toLocaleString() : Object.entries(v).filter(([, x]) => typeof x === "number").map(([n, x]) => `${n.replace(/_/g, " ")} ${(x as number).toLocaleString()}`).join(", ")}</span></li>)}</ul> : null}
+              {(m.warnings ?? []).map((w, i) => <p key={i} role="status" className="rounded-md border border-warning-foreground/25 bg-warning p-2 text-sm text-warning-foreground">{text(w)}</p>)}
+              {(m.errors ?? []).map((e, i) => <p key={i} role="alert" className="text-sm text-error-foreground">{text(e)}</p>)}
+              <div className="flex gap-2">
+                {status === "awaiting_confirmation" ? <Button onClick={() => setAsk("import")}>Import</Button> : null}
+                {!["completed", "failed", "cancelled"].includes(status) ? <Button variant="ghost" onClick={() => setAsk("cancel")}>Cancel</Button> : null}
+              </div>
+              {confirm.error ? <ApiError error={confirm.error} title="Could not start the import" /> : null}
+              {cancel.error ? <ApiError error={cancel.error} title="Could not cancel the run" /> : null}
+            </div>
+          ) : null}
+        </SectionCard>
+      ) : null}
+      <ConfirmSpendDialog open={c != null} tier={c?.tier ?? "external"} title={c?.title ?? ""} description={c?.description} confirmLabel={c?.confirm} confirming={busy} onConfirm={run} onCancel={() => setAsk(null)} />
+    </div>
+  );
+}

package/blocks/integrations/components/sugarcrm-connect.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+/**
+ * SugarCrmConnect: connect SugarCRM from here. Unlike HubSpot, Salesforce, Pipedrive and Zoho (whose sign-in screen only runs in the graph8
+ * app, so those link out), SugarCRM signs in with an instance address, a user and a password, which the API can take directly.
+ *   Not connected   the form; Connect signs in and stores the credentials (there is no way to check them before saving).
+ *   Connected       "Check connection" (free, reads the stored login), "Update credentials" (sign in again with new ones), "Remove".
+ * Connecting and updating sign in to your SugarCRM and store the credentials, so they go through ConfirmSpendDialog (external);
+ * removing is destructive and confirmed. The password is sent once through your server's proxy and is cleared from the form afterwards.
+ *
+ * SDK operations, in order:
+ *   1. validateSugarcrm    POST   /integrations/sugarcrm/validate                (read)  checks the stored credentials
+ *   2. connectSugarcrm     POST   /integrations/sugarcrm/connect { instance_url, username, password, client_id?, client_secret? }   (external, confirmed)
+ *   3. reconnectSugarcrm   POST   /integrations/sugarcrm/reconnect { same }       (external, confirmed)
+ *   4. disconnectSugarcrm  DELETE /integrations/sugarcrm                          (destructive, confirmed)
+ */
+import { useState } from "react";
+import { Button, Input, Label } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { g8Delete, g8Post } from "@/g8/lib/g8-client";
+import { useBrand } from "@/g8/hooks/use-brand";
+
+export interface SugarCrmConnectProps {
+  /** Whether SugarCRM is connected now (from the sync list). */
+  connected: boolean;
+  /** After a connect, update or removal. */
+  onChanged?: () => void;
+  className?: string;
+}
+
+interface Form { instance_url: string; username: string; password: string; client_id: string; client_secret: string }
+const BLANK: Form = { instance_url: "", username: "", password: "", client_id: "", client_secret: "" };
+type Ask = "connect" | "reconnect" | "remove";
+
+/** The request body: client id and secret only when typed (the instance's defaults apply otherwise). */
+export function sugarBody(f: Form): Record<string, string> {
+  return { instance_url: f.instance_url.trim().replace(/\/+$/, ""), username: f.username.trim(), password: f.password, ...(f.client_id.trim() ? { client_id: f.client_id.trim() } : {}), ...(f.client_secret ? { client_secret: f.client_secret } : {}) };
+}
+
+export function SugarCrmConnect({ connected, onChanged, className }: SugarCrmConnectProps) {
+  const brand = useBrand();
+  const [f, setF] = useState<Form>(BLANK);
+  const [ask, setAsk] = useState<Ask | null>(null);
+  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const set = (patch: Partial<Form>) => setF((x) => ({ ...x, ...patch }));
+  const valid = /^https?:\/\/\S+$/i.test(f.instance_url.trim()) && f.username.trim() && f.password;
+  const done = () => { setF(BLANK); setAsk(null); setEditing(false); onChanged?.(); };
+
+  const connect = useG8Mutation((kind: "connect" | "reconnect") => g8Post(`/integrations/sugarcrm/${kind}`, sugarBody(f)), { onSuccess: done, onError: () => setAsk(null) });
+  const check = useG8Mutation(() => g8Post("/integrations/sugarcrm/validate", {}));
+  const remove = useG8Mutation(() => g8Delete("/integrations/sugarcrm"), { onSuccess: done, onError: () => setAsk(null) });
+  const verdict = (check.data as { data?: { valid?: boolean; connected?: boolean; message?: string } } | undefined)?.data;
+  const showForm = !connected || editing;
+
+  return (
+    <div className={`flex flex-col gap-3 ${className ?? ""}`}>
+      {connected ? (
+        <div className="flex flex-wrap items-center gap-2">
+          <Button size="sm" variant="outline" loading={check.loading} onClick={() => void check.mutate(undefined)}>Check connection</Button>
+          <Button size="sm" variant="outline" onClick={() => setEditing((v) => !v)}>{editing ? "Close" : "Update credentials"}</Button>
+          <Button size="sm" variant="ghost" onClick={() => setAsk("remove")}>Remove</Button>
+          {check.data !== undefined ? <span role="status" className="text-sm" data-testid="sugar-check">{verdict?.valid === false || verdict?.connected === false ? `Sign-in failed${verdict?.message ? `: ${verdict.message}` : ""}` : "Signed in to SugarCRM."}</span> : null}
+        </div>
+      ) : <p className="text-sm text-muted-foreground">Sign in to your SugarCRM instance to sync contacts, companies and deals.</p>}
+      {check.error ? <ApiError error={check.error} title="Could not check the connection" /> : null}
+      {showForm ? (
+        <form className="flex flex-col gap-3" onSubmit={(e) => { e.preventDefault(); if (valid) setAsk(connected ? "reconnect" : "connect"); }}>
+          <div className="flex flex-col gap-1"><Label htmlFor="sugar-url">Instance address</Label><Input id="sugar-url" type="url" placeholder="https://yourcompany.sugarondemand.com" value={f.instance_url} onChange={(e) => set({ instance_url: e.target.value })} /></div>
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="flex flex-col gap-1"><Label htmlFor="sugar-user">User</Label><Input id="sugar-user" autoComplete="off" value={f.username} onChange={(e) => set({ username: e.target.value })} /></div>
+            <div className="flex flex-col gap-1"><Label htmlFor="sugar-pass">Password</Label><Input id="sugar-pass" type="password" autoComplete="new-password" value={f.password} onChange={(e) => set({ password: e.target.value })} /></div>
+          </div>
+          <button type="button" className="self-start text-xs underline" onClick={() => setShowAdvanced((v) => !v)}>{showAdvanced ? "Hide" : "Show"} client credentials</button>
+          {showAdvanced ? (
+            <div className="grid gap-3 sm:grid-cols-2">
+              <div className="flex flex-col gap-1"><Label htmlFor="sugar-cid">Client id (optional)</Label><Input id="sugar-cid" autoComplete="off" value={f.client_id} onChange={(e) => set({ client_id: e.target.value })} /></div>
+              <div className="flex flex-col gap-1"><Label htmlFor="sugar-secret">Client secret (optional)</Label><Input id="sugar-secret" type="password" autoComplete="new-password" value={f.client_secret} onChange={(e) => set({ client_secret: e.target.value })} /></div>
+            </div>
+          ) : null}
+          {connect.error ? <ApiError error={connect.error} title={connected ? "Could not update the credentials" : "Could not connect SugarCRM"} /> : null}
+          <div><Button type="submit" disabled={!valid}>{connected ? "Save credentials" : "Connect SugarCRM"}</Button></div>
+        </form>
+      ) : null}
+      {remove.error ? <ApiError error={remove.error} title="Could not remove the connection" /> : null}
+      <ConfirmSpendDialog open={ask === "connect" || ask === "reconnect"} tier="external" title={ask === "reconnect" ? "Update the SugarCRM credentials" : "Connect SugarCRM"}
+        description={`${brand.name} signs in to ${f.instance_url.trim() || "your instance"} as ${f.username.trim() || "this user"} and stores the credentials to sync on your behalf.`}
+        confirmLabel={ask === "reconnect" ? "Update" : "Connect"} confirming={connect.loading} onConfirm={() => ask && ask !== "remove" && void connect.mutate(ask)} onCancel={() => setAsk(null)} />
+      <ConfirmSpendDialog open={ask === "remove"} tier="destructive" title="Remove the SugarCRM connection" description="Syncs configured against it stop working and the stored credentials are deleted. Records already synced stay."
+        confirmLabel="Remove" confirming={remove.loading} onConfirm={() => void remove.mutate(undefined)} onCancel={() => setAsk(null)} />
+    </div>
+  );
+}

package/blocks/integrations/components/sync-status.tsx

@@ -51,7 +51,7 @@ function JobProgress({ jobId }: { jobId: string }) {
     },
   );
   return (
-    <p role="status" className="text-sm text-gray-700" data-testid="sync-job">
+    <p role="status" className="text-sm text-foreground" data-testid="sync-job">
       Job {jobId}: {job.status?.status ?? "starting"}
       {job.polling ? "..." : ""}
       {job.error ? " (could not read the job status)" : ""}
@@ -117,7 +117,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
   const s = status.data?.data;
   if (!s?.connected) {
     return (
-      <p role="status" className={`rounded border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900 ${className ?? ""}`}>
+      <p role="status" className={`rounded border border-warning-foreground/25 bg-warning p-3 text-sm text-warning-foreground ${className ?? ""}`}>
         {label} is not connected. {s?.message ?? `Connect it in ${brand.linkLabel}, then come back.`}
       </p>
     );
@@ -145,7 +145,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
       <div className="flex items-center justify-between">
         <div>
           <h3 className="font-medium">{label}</h3>
-          <p className="text-xs text-gray-500">Connected. Last sync: {formatWhen(s.last_sync_at)}</p>
+          <p className="text-xs text-muted-foreground">Connected. Last sync: {formatWhen(s.last_sync_at)}</p>
         </div>
         <Button size="sm" variant="outline" onClick={() => void status.refetch()}>
           Recheck
@@ -153,7 +153,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
       </div>
 
       {(["push", "pull"] as const).map((direction) => (
-        <div key={direction} className="flex items-center justify-between rounded border border-gray-200 px-3 py-2 text-sm">
+        <div key={direction} className="flex items-center justify-between rounded border border-border px-3 py-2 text-sm">
           <span>{direction === "push" ? `Send ${brand.linkLabel} contacts to the CRM` : `Bring CRM contacts into ${brand.linkLabel}`}</span>
           <span className="flex gap-2">
             <Button
@@ -181,7 +181,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
         <Button onClick={() => setPending({ kind: "push" })}>Push {records.length} contacts now</Button>
       ) : null}
       {pushed ? (
-        <p role="status" className="text-sm text-green-700">
+        <p role="status" className="text-sm text-positive-foreground">
           {pushed}
         </p>
       ) : null}
@@ -199,7 +199,7 @@ export function SyncStatus({ provider, records, className }: SyncStatusProps) {
           ) : (
             <ul className="mt-1 flex flex-wrap gap-1 text-xs">
               {(fields.data ?? []).map((f, i) => (
-                <li key={i} className="rounded border border-gray-200 px-1.5 py-0.5">
+                <li key={i} className="rounded border border-border px-1.5 py-0.5">
                   {f.label ?? f.name}
                 </li>
               ))}

package/blocks/integrations/components/sync-triggers.tsx

@@ -0,0 +1,134 @@
+"use client";
+
+/**
+ * SyncTriggers: run a sync now instead of waiting for the continuous one. For one connected CRM:
+ *   Contacts   send every graph8 contact to the CRM, or bring the CRM's contacts in (optionally only the first N).
+ *   Deals      the same for deals.
+ *   Leads      Salesforce only (the lead routes are Salesforce-specific). Check what a push would send (a free preview), choose which lead
+ *              status qualified and unqualified contacts get, then send leads. A large push needs an explicit acknowledgement of the previewed
+ *              count (large_population_confirmed). Bringing leads in runs the organisation's SAVED lead pull settings (only connection_id and
+ *              an optional limit are sent, so the saved scope is not overridden).
+ * Each sync is a background job: it appears under "Jobs" and is followed (polled) until it ends. Every sync changes data in the CRM
+ * or in graph8 and can touch thousands of records, so each one goes through ConfirmSpendDialog (external) that states its scope.
+ *
+ * SDK operations, in order:
+ *   1. pushAllContacts / pullAllContacts   POST /integrations/crm-sync/contacts/push|pull { connection_id, limit? }     (external, confirmed)
+ *   2. pushAllDeals / pullAllDeals         POST /integrations/crm-sync/deals/push|pull { connection_id, limit? }        (external, confirmed)
+ *   3. listLeadStatuses                    GET  /integrations/crm-sync/leads/statuses?connection_id                      (read)
+ *   4. previewLeadPush                     GET  /integrations/crm-sync/leads/push-preview?connection_id&source_mode&...  (read)
+ *   5. pushAllLeads / pullAllLeads         POST /integrations/crm-sync/leads/push|pull { connection_id, source_mode, ... }   (external, confirmed)
+ *   6. getSyncJob                          GET  /integrations/crm-sync/jobs/{job_id}                                     (read, polled)
+ * Syncing a graph8 list or audience needs a list picker and is started from the Lists screen.
+ */
+import { useEffect, useState } from "react";
+import { Button, Input, Label, Skeleton } from "@graph8/sdk/ui";
+import { ApiError } from "@/g8/components/api-error";
+import { ConfirmSpendDialog } from "@/g8/components/confirm-spend-dialog";
+import { SectionCard } from "@/g8/components/screen/section-card";
+import { StatusPill, toneForStatus } from "@/g8/components/screen/status-pill";
+import { useG8Mutation } from "@/g8/hooks/use-g8-mutation";
+import { useG8Query } from "@/g8/hooks/use-g8-query";
+import { useJobPoll } from "@/g8/hooks/use-job-poll";
+import { g8Get, g8Post } from "@/g8/lib/g8-client";
+import { PROVIDER_LABELS, TERMINAL_JOB_STATES } from "../lib/integrations-utils";
+import { useBrand } from "@/g8/hooks/use-brand";
+import type { CrmProvider } from "../lib/integrations-utils";
+
+export interface SyncTriggersProps {
+  connectionId: string;
+  provider: CrmProvider;
+  className?: string;
+}
+
+interface Job { id: string; label: string }
+interface Plan { path: string; label: string; scope: string; body: Record<string, unknown> }
+interface JobStatus { job_id?: string | null; status?: string | null; processed?: number | null; total?: number | null; failed?: number | null }
+
+function JobRow({ job }: { job: Job }) {
+  const poll = useJobPoll<JobStatus>(async (signal) => (await g8Get<JobStatus>(`/integrations/crm-sync/jobs/${encodeURIComponent(job.id)}`, undefined, { signal })).data, { isTerminal: (j) => TERMINAL_JOB_STATES.includes(String(j.status ?? "").toLowerCase()) });
+  const st = String(poll.status?.status ?? "starting");
+  const s = poll.status;
+  return (
+    <li className="flex flex-wrap items-center justify-between gap-2 px-3 py-2 text-sm" data-testid={`job-${job.id}`}>
+      <span>{job.label}<span className="ml-2 text-xs text-muted-foreground">{job.id}</span></span>
+      <span className="flex items-center gap-2">
+        {s?.total ? <span className="text-xs text-muted-foreground">{s.processed ?? 0} of {s.total}{s.failed ? `, ${s.failed} failed` : ""}</span> : null}
+        <StatusPill tone={toneForStatus(st)} dot>{st}</StatusPill>{poll.polling ? <span className="text-xs text-muted-foreground">updating</span> : null}{poll.error ? <span className="text-xs text-error-foreground">could not read the status</span> : null}
+      </span>
+    </li>
+  );
+}
+
+export function SyncTriggers({ connectionId, provider, className }: SyncTriggersProps) {
+  const brand = useBrand();
+  const label = PROVIDER_LABELS[provider];
+  const [bigOk, setBigOk] = useState(false);
+  const [limit, setLimit] = useState("");
+  const [mode, setMode] = useState<"all_qualified" | "all_contacts">("all_qualified");
+  const [qualified, setQualified] = useState("");
+  const [unqualified, setUnqualified] = useState("");
+  const [plan, setPlan] = useState<Plan | null>(null);
+  const [jobs, setJobs] = useState<Job[]>([]);
+  useEffect(() => { setPlan(null); setJobs([]); setLimit(""); setQualified(""); setUnqualified(""); setBigOk(false); }, [connectionId]);
+
+  const statuses = useG8Query((signal) => g8Get("/integrations/crm-sync/leads/statuses", { connection_id: connectionId }, { signal }), [connectionId], { enabled: provider === "salesforce" });
+  const statusRows = (((statuses.data as { data?: { statuses?: Array<string | { value?: string; id?: string; label?: string; name?: string }> } } | undefined)?.data?.statuses) ?? []).map((s) => typeof s === "string" ? { value: s, label: s } : { value: s.value ?? s.id ?? s.name ?? "", label: s.label ?? s.name ?? s.value ?? s.id ?? "" });
+  const previewKey = `${connectionId}|${mode}|${qualified}|${unqualified}`;
+  const [previewed, setPreviewed] = useState("");
+  const preview = useG8Query((signal) => g8Get("/integrations/crm-sync/leads/push-preview", { connection_id: connectionId, source_mode: mode, status_qualified: qualified || undefined, status_unqualified: unqualified || undefined }, { signal }), [previewKey], { enabled: false });
+
+  const n = Number(limit);
+  const limitOk = limit.trim() === "" || (Number.isInteger(n) && n > 0);
+  const cap = limit.trim() ? { limit: n } : {};
+  const scope = limit.trim() ? `up to ${n.toLocaleString()}` : "all";
+  const run = useG8Mutation(async (p: Plan) => {
+    const res = await g8Post<{ job_id?: string | null }>(p.path, p.body);
+    return { id: res.data?.job_id ?? null, label: p.label };
+  }, { onSuccess: (r) => { setPlan(null); if (r.id) setJobs((j) => [{ id: r.id as string, label: r.label }, ...j]); }, onError: () => setPlan(null) });
+
+  const plans = (kind: "contacts" | "deals"): Plan[] => [
+    { path: `/integrations/crm-sync/${kind}/push`, label: `Send ${kind} to ${label}`, scope: `${scope} ${brand.name} ${kind}, created or updated in ${label}`, body: { connection_id: connectionId, ...cap } },
+    { path: `/integrations/crm-sync/${kind}/pull`, label: `Bring ${kind} in from ${label}`, scope: `${scope} ${label} ${kind}, created or updated in ${brand.name}`, body: { connection_id: connectionId, ...cap } },
+  ];
+  const leadPush: Plan = { path: "/integrations/crm-sync/leads/push", label: `Send leads to ${label}`, scope: `${mode === "all_qualified" ? "qualified" : "all"} contacts as leads in ${label}`,
+    body: { connection_id: connectionId, source_mode: mode, ...(qualified ? { status_qualified: qualified } : {}), ...(unqualified ? { status_unqualified: unqualified } : {}), ...(bigOk ? { large_population_confirmed: true } : {}), ...cap } };
+  const leadPull: Plan = { path: "/integrations/crm-sync/leads/pull", label: `Bring leads in from ${label}`, scope: `${scope} ${label} leads (the saved lead pull settings), created or updated in ${brand.name}`, body: { connection_id: connectionId, ...cap } };
+  const pv = ((preview.data as { data?: Record<string, unknown> } | undefined)?.data ?? {}) as Record<string, unknown>;
+  const shown = previewed === previewKey && preview.data !== undefined;
+  const row = (p: Plan) => <Button key={p.path} size="sm" variant="outline" disabled={!limitOk} onClick={() => setPlan(p)}>{p.label}</Button>;
+  return (
+    <div className={`flex flex-col gap-4 ${className ?? ""}`}>
+      <div className="flex flex-col gap-1 sm:max-w-xs">
+        <Label htmlFor="sync-limit">Only the first N records (optional)</Label>
+        <Input id="sync-limit" inputMode="numeric" placeholder="All" value={limit} onChange={(e) => setLimit(e.target.value)} />
+        {!limitOk ? <p role="alert" className="text-xs text-error-foreground">Enter a whole number above zero, or leave it empty.</p> : null}
+      </div>
+      <SectionCard title="Contacts" description={`Between ${brand.name} and ${label}`}><div className="flex flex-wrap gap-2">{plans("contacts").map(row)}</div></SectionCard>
+      <SectionCard title="Deals" description={`Between ${brand.name} and ${label}`}><div className="flex flex-wrap gap-2">{plans("deals").map(row)}</div></SectionCard>
+      {provider === "salesforce" ? <SectionCard title="Leads" description="Check what would be sent first, then send">
+        <div className="flex flex-col gap-3">
+          <div className="grid gap-3 sm:grid-cols-3">
+            <div className="flex flex-col gap-1"><Label htmlFor="lead-mode">Send</Label><select id="lead-mode" className="h-9 rounded-md border bg-background px-2 text-sm" value={mode} onChange={(e) => setMode(e.target.value as typeof mode)}><option value="all_qualified">Qualified contacts</option><option value="all_contacts">All contacts</option></select></div>
+            <div className="flex flex-col gap-1"><Label htmlFor="lead-q">Status for qualified</Label><select id="lead-q" className="h-9 rounded-md border bg-background px-2 text-sm" value={qualified} onChange={(e) => setQualified(e.target.value)}><option value="">CRM default</option>{statusRows.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}</select></div>
+            <div className="flex flex-col gap-1"><Label htmlFor="lead-u">Status for others</Label><select id="lead-u" className="h-9 rounded-md border bg-background px-2 text-sm" value={unqualified} onChange={(e) => setUnqualified(e.target.value)}><option value="">CRM default</option>{statusRows.map((s) => <option key={s.value} value={s.value}>{s.label}</option>)}</select></div>
+          </div>
+          {statuses.error ? <ApiError compact error={statuses.error} title="Could not load the lead statuses" onRetry={() => void statuses.refetch()} /> : null}
+          <div className="flex flex-wrap items-center gap-2">
+            <Button size="sm" variant="outline" loading={preview.loading} onClick={() => { setPreviewed(previewKey); void preview.refetch(); }}>Preview the push</Button>
+            {shown ? <span role="status" className="text-sm" data-testid="lead-preview">{Object.keys(pv).length ? Object.entries(pv).filter(([, v]) => typeof v === "number" || typeof v === "string").slice(0, 4).map(([k, v]) => `${k.replace(/_/g, " ")}: ${String(v)}`).join(", ") : "Nothing would be sent."}</span> : null}
+          </div>
+          {preview.error && previewed === previewKey ? <ApiError compact error={preview.error} title="Could not preview the push" /> : null}
+          <label className="flex items-start gap-2 text-sm"><input type="checkbox" className="mt-1" checked={bigOk} onChange={(e) => setBigOk(e.target.checked)} /><span>I have checked the previewed count and accept a large push (needed only above the app's population limit).</span></label>
+          <div className="flex flex-wrap gap-2">{row(leadPush)}{row(leadPull)}</div>
+        </div>
+      </SectionCard> : null}
+      {run.error ? <ApiError error={run.error} title="The sync did not start" /> : null}
+      <SectionCard title={`Jobs (${jobs.length})`} description="Started in this session" flush>
+        {run.loading ? <Skeleton className="m-3 h-8" /> : null}
+        {jobs.length === 0 ? <p className="px-4 py-3 text-sm text-muted-foreground">No sync started yet. Pick one above.</p> : <ul className="divide-y">{jobs.map((j) => <JobRow key={j.id} job={j} />)}</ul>}
+      </SectionCard>
+      <ConfirmSpendDialog open={plan != null} tier="external" title={plan?.label ?? "Run a sync"} description={`This changes real data: ${plan?.scope ?? ""}. It runs in the background and cannot be recalled.`}
+        confirmLabel="Start sync" confirming={run.loading} onConfirm={() => plan && void run.mutate(plan)} onCancel={() => setPlan(null)} />
+    </div>
+  );
+}